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

fix outline theme

Browse Source
This commit is contained in:
rutik wankhade 2023-01-25 18:30:02 +05:30
parent 5ecd671eb7
commit b8526256ab
3 changed files with 20 additions and 12 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
src/assets/images/theme5.webp Normal file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.7 KiB

9
src/components/Editor.js
View File

@ -11,6 +11,7 @@ import theme1 from '../assets/images/theme1.webp'
import theme2 from '../assets/images/theme2.webp'
import theme3 from '../assets/images/theme3.webp'
import theme4 from '../assets/images/theme4.webp'
import theme5 from '../assets/images/theme5.webp'
const defaultSettings = {
@ -79,7 +80,7 @@ class Editor extends React.Component {
<Tab.Group>
<div className="flex md:flex-row flex-col">
<Tab.List className=" bg-white p-2 flex flex-row md:flex-col">
<Tab.List className=" bg-white md:p-0 p-2 flex flex-row md:flex-col">
<Tab className="flex items-center font-semibold ">
<svg xmlns="http://www.w3.org/2000/svg" fill="currentColor" className="text-gray- bg-white rounded-xl w-12 m-2 h-12 p-2 rounded border" width="24" height="24" viewBox="0 0 24 24" ><path d="M19.045 7.401c.378-.378.586-.88.586-1.414s-.208-1.036-.586-1.414l-1.586-1.586c-.378-.378-.88-.586-1.414-.586s-1.036.208-1.413.585L4 13.585V18h4.413L19.045 7.401zm-3-3 1.587 1.585-1.59 1.584-1.586-1.585 1.589-1.584zM6 16v-1.585l7.04-7.018 1.586 1.586L7.587 16H6zm-2 4h16v2H4z"></path></svg>
</Tab>
@ -250,6 +251,10 @@ class Editor extends React.Component {
onClick={(e) => this.setState({ theme: "preview" })}
className="opacity-60 cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
/>
<img src={theme5} alt="basic theme"
onClick={(e) => this.setState({ theme: "outline" })}
className="opacity-60 cursor-pointer border border-gray-100 hover:border-gray-200 hover:scale-105 duration-300 m-2"
/>
</div>
@ -274,7 +279,7 @@ class Editor extends React.Component {
</div>
<div className="flex m-6 flex-col items-center justify-center ">
<div className=" flex m-6 flex-col items-center justify-center ">
<ComponentToImg downloadAs={this.state.download}>
<CoverImage {...this.state} />

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

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