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

fix theme styling

Browse Source
This commit is contained in:
rutik wankhade 2023-01-25 14:15:34 +05:30
parent 8c52145366
commit aa3516cebc
7 changed files with 17 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

1
src/assets/icons/reset.svg
View File

@ -1 +0,0 @@
<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24"><path d="M12 16c1.671 0 3-1.331 3-3s-1.329-3-3-3-3 1.331-3 3 1.329 3 3 3z"></path><path d="M20.817 11.186a8.94 8.94 0 0 0-1.355-3.219 9.053 9.053 0 0 0-2.43-2.43 8.95 8.95 0 0 0-3.219-1.355 9.028 9.028 0 0 0-1.838-.18V2L8 5l3.975 3V6.002c.484-.002.968.044 1.435.14a6.961 6.961 0 0 1 2.502 1.053 7.005 7.005 0 0 1 1.892 1.892A6.967 6.967 0 0 1 19 13a7.032 7.032 0 0 1-.55 2.725 7.11 7.11 0 0 1-.644 1.188 7.2 7.2 0 0 1-.858 1.039 7.028 7.028 0 0 1-3.536 1.907 7.13 7.13 0 0 1-2.822 0 6.961 6.961 0 0 1-2.503-1.054 7.002 7.002 0 0 1-1.89-1.89A6.996 6.996 0 0 1 5 13H3a9.02 9.02 0 0 0 1.539 5.034 9.096 9.096 0 0 0 2.428 2.428A8.95 8.95 0 0 0 12 22a9.09 9.09 0 0 0 1.814-.183 9.014 9.014 0 0 0 3.218-1.355 8.886 8.886 0 0 0 1.331-1.099 9.228 9.228 0 0 0 1.1-1.332A8.952 8.952 0 0 0 21 13a9.09 9.09 0 0 0-.183-1.814z"></path></svg>
Side by Side

Before

Width:  |  Height:  |  Size: 890 B

1
src/components/Editor.js
View File

@ -3,7 +3,6 @@ import CoverImage from "./CoverImage";
import ComponentToImg from "./ComponentToImg";
import Select from 'react-select';
import RandomTheme from './RandomTheme';
import resetIcon from '../assets/icons/reset.svg'
import { ImgProvider } from '../utils/ImgContext'
import Header from "./Header";
import { Tab } from '@headlessui/react'

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

@ -5,7 +5,7 @@ const BasicTheme = ({ config }) => {
const { title, bgColor, pattern, author, icon, font, customIcon,platform } = config;
return (
<div className="p-4 bg-white border">
<div className="p-4 bg-white ">
<div className={`overflow-y-hidden flex text-gray-800 items-center ${pattern} ${platform} `}
style={{ backgroundColor: bgColor }}
>

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

@ -6,7 +6,7 @@ const ModernTheme = ({ config }) => {
const { title, bgColor, pattern, author, icon, font, customIcon, platform } = config;
return (
<div className="w-full p-4 bg-white border">
<div className="w-full p-4 bg-white ">
<div className=" overflow-y-hidden w-full flex items-center">
<div className={` h-full w-full rounded-xl p-4 text-gray-800 flex items-center ${pattern} ${platform}`}
style={{ backgroundColor: bgColor }}

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

@ -3,7 +3,7 @@ const OutlineTheme = ({ config }) => {
const { title, bgColor, pattern, author, icon, font, customIcon, platform } = config;
return (
<div className="p-4 bg-white border">
<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} `}

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

@ -6,7 +6,7 @@ const PreviewTheme = ({ config }) => {
const [image, setImage] = useState()
return (
<div className="p-4 bg-white border">
<div className="p-4 bg-white">
<div className={`overflow-y-hidden flex flex-col rounded px-4 pt-4 ${platform}`}

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

@ -3,7 +3,7 @@ import unsplash from "../../utils/unsplashConfig";
import { ImgContext } from '../../utils/ImgContext';
const StylishTheme = ({ config }) => {
const { title, author, font, icon, customIcon, platform } = config;
const { title, author, font, icon, customIcon, platform,bgColor } = config;
// const [image, setImage] = useState({})
@ -18,7 +18,8 @@ const StylishTheme = ({ config }) => {
.getPhotos({
query: searchText,
page: 1,
per_page: 25
per_page: 25,
orientation:'portrait'
})
@ -68,11 +69,11 @@ const StylishTheme = ({ config }) => {
<div className=" bg-white rounded">
<div className={`border overflow-y-hidden flex flex-col rounded ${platform}`}
// style={{ backgroundColor: bgColor }}
<div className={` overflow-y-hidden flex flex-col rounded ${platform}`}
style={{ backgroundColor: bgColor }}
>
<div className="flex flex-row border items-center bg-white justify-center p-4 ">
<div className="flex flex-row items-center bg-white justify-center m-4 ">
<div className="h-full w-1/2 bg-white rounded-l-xl">
<div className={`${font} px-12 justify-center text-left rounded-xl h-full p-4 flex flex-col`}>
@ -98,12 +99,14 @@ const StylishTheme = ({ config }) => {
{unsplashImage ?
<div className='relative group'>
<div className='relative flex group'>
<div className="h-96 ">
<img src={unsplashImage.url && unsplashImage.url} className=" rounded-xl object-cover h-96 w-full " alt="preview" />
</div>
<div className="h-96 w-96 ">
<img src={unsplashImage.url && unsplashImage.url} className=" object-cover h-96 w-96 " alt="preview" />
</div>
<button
onClick={() => setUnsplashImage('')}
className="absolute top-4 right-2 cursor-pointer">