wood/CoverView
1
0
Fork 0
mirror of https://github.com/woodchen-ink/CoverView.git synced 2025-07-18 14:01:56 +08:00
Code Issues Packages Projects Releases Wiki Activity

feat: add new fonts and fix theme issue

Browse Source
This commit is contained in:
rutik wankhade 2022-06-25 13:06:05 +05:30
parent 200bd1c60f
commit cf59fb905c
7 changed files with 39 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
src/components/ComponentToImg.js
View File

@ -1,4 +1,4 @@
import React,{useEffect} from "react";
import React from "react";
import { exportComponentAsPNG } from "react-component-export-image";
import "./CoverImage.css";

8
src/components/Editor.js
View File

@ -7,7 +7,7 @@ import RandomTheme from './RandomTheme';
const defaultSettings = {
title: "How I built my first project with react",
bgColor: "#dcd6f7",
bgColor: "#fee856",
pattern: "",
download: "PNG",
author: 'Rutik Wankhade',
@ -115,6 +115,12 @@ class Editor extends React.Component {
<option>font-serif</option>
<option>font-sans</option>
<option>font-mono</option>
<option>font-Inter</option>
<option>font-Poppins</option>
<option>font-Anek</option>
<option>font-Nunito</option>
</select>
</div>
<div className="flex flex-col m-2 ">

6
src/components/Themes/BasicTheme.js
View File

@ -14,7 +14,7 @@ const BasicTheme = ({ config }) => {
<div className={`${font} bg-white md:w-10/12 m-auto flex flex-col pt-12 rounded-xl`}>
<div className="px-12">
<div>
<h1 className="text-3xl md:text-5xl font-bold text-center">{title}</h1>
<h1 className="text-3xl md:text-5xl text-gray-800 font-bold text-center">{title}</h1>
</div>
</div>
@ -25,8 +25,8 @@ const BasicTheme = ({ config }) => {
<img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
</div>
:
<div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
<i className={`devicon-${icon.value}-plain p-4 dev-icon text-7xl`}></i>
<div className="mr-auto ml-2 items-center justify-center flex">
<i className={`devicon-${icon.value}-plain p-4 dev-icon text-5xl`}></i>
</div>
}

2
src/components/Themes/ModernTheme.js
View File

@ -26,7 +26,7 @@ const ModernTheme = ({ config }) => {
<div className="h-full w-2/3">
<div className={`${font} bg-white px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}>
<h1 className="text-3xl md:text-5xl font-bold ">{title}</h1>
<h1 className="text-3xl md:text-5xl font-bold text-gray-800">{title}</h1>
<h2 className="text-xl mt-10 font-semibold text-left ">{author}</h2>
</div>
</div>

10
src/components/Themes/OutlineTheme.js
View File

@ -11,25 +11,25 @@ const OutlineTheme = ({ config }) => {
>
<div className={`${font} bg-white rounded md:w-10/12 border-4 border-gray-800 m-auto flex flex-col py-12 px-6 `}>
<div className={`${font} bg-white rounded-2xl md:w-10/12 m-auto flex flex-col py-12 px-6 `}>
<div className="px-12">
<div>
<h1 className="text-3xl md:text-5xl font-bold text-center">{title}</h1>
<h1 className="text-3xl text-gray-800 md:text-5xl font-bold text-center">{title}</h1>
</div>
</div>
</div>
<div className={`${font} w-full border-gray-800 border-t-4 flex mt-10 p-2 px-6 items-center bg-white`}>
<div className={`${font} w-full h-16 border-gray-800 border-t-4 flex mt-10 p-2 px-6 items-center bg-white`}>
{
customIcon ?
<div className="w-12 h-12 ">
<img src={customIcon} alt="img" className="rounded-full bg-white p-1 border-white" />
</div>
:
<div className=" rounded-full p-6 w-32 h-32 bg-white mx-auto items-center justify-center flex">
<i className={`devicon-${icon.value}-plain p-4 dev-icon text-7xl`}></i>
<div className=" mr-auto ml-2 items-center justify-center flex">
<i className={`devicon-${icon.value}-plain p-4 dev-icon text-5xl`}></i>
</div>
}
<h2 className="text-xl ml-auto mr-2 font-semibold">{author}</h2>

6
src/index.css
View File

@ -1,3 +1,9 @@
@tailwind base;
@tailwind components;
@tailwind utilities;
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Anek+Latin:wght@400;500;600;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Nunito:wght@600;700;800&display=swap');

13
tailwind.config.js
View File

@ -3,7 +3,18 @@ module.exports = {
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
extend: {
fontFamily: {
Inter: ['Inter', 'sans-serif'],
Poppins: ['Poppins', 'sans-serif'],
Anek: ['Anek Latin', 'sans-serif'],
Nunito: ['Nunito', 'sans-serif']
}
},
},
plugins: [],
}