1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-03-20 10:39:45 +01:00

style fixes

This commit is contained in:
Kushagra Gour 2024-03-29 18:20:28 +05:30
parent b9ba819de2
commit 3f93fc8af6
5 changed files with 44 additions and 42 deletions

View File

@ -169,6 +169,7 @@ export class CreateNewModal extends Component {
item={template}
focusable
onClick={onTemplateSelect.bind(null, template, false)}
hasOptions={false}
/>
);
})}

View File

@ -11,7 +11,8 @@ export function ItemTile({
onRemoveBtnClick,
onToggleVisibilityBtnClick,
focusable,
inline
inline,
hasOptions = true
}) {
return (
<div
@ -58,7 +59,7 @@ export function ItemTile({
</div>
<div className="flex flex-v-center">
{item.img ? (
<div>
<div class="d-f">
<img
class="saved-item-tile__img"
height="40"
@ -82,30 +83,32 @@ export function ItemTile({
</div>
) : null}
</div>
<div class="saved-item-tile__meta">
<HStack justify="space-between">
<div>
{item.updatedOn ? (
<>
Last updated:{' '}
<time dateTime={item.updatedOn}>
{getHumanDate(item.updatedOn)}
</time>
</>
) : null}
</div>
<div>
<Stack gap={1} align="center">
<Icon
size="16"
color="currentColor"
name={item.isPublic ? 'eye' : 'eye-striked'}
/>
{item.isPublic ? 'Public' : ''}
</Stack>
</div>
</HStack>
</div>
{hasOptions && (
<div class="saved-item-tile__meta">
<HStack justify="space-between">
<div>
{item.updatedOn ? (
<>
Last updated:{' '}
<time dateTime={item.updatedOn}>
{getHumanDate(item.updatedOn)}
</time>
</>
) : null}
</div>
<div>
<Stack gap={1} align="center">
<Icon
size="16"
color="currentColor"
name={item.isPublic ? 'eye' : 'eye-striked'}
/>
{item.isPublic ? 'Public' : ''}
</Stack>
</div>
</HStack>
</div>
)}
</div>
);
}

View File

@ -1,3 +1,3 @@
export const ProBadge = () => {
return <div className="pro-badge">PRO</div>;
return <div className="badge pro-badge">PRO</div>;
};

View File

@ -42,5 +42,5 @@ export function Divider(props) {
}
export function BetaTag() {
return <span class="beta-tag">Beta</span>;
return <span class="badge beta-tag">Beta</span>;
}

View File

@ -1697,16 +1697,6 @@ body > #demo-frame {
display: inline-block;
}
.beta-tag {
border-radius: 4px;
text-transform: uppercase;
background: #c68955;
color: white;
letter-spacing: 0.6px;
padding: 2px 5px;
font-size: 0.9em;
}
.is-extension .web-maker-with-tag:after {
display: none;
}
@ -2184,18 +2174,26 @@ while the theme CSS file is loading */
.stack > * {
margin: 0;
}
.pro-badge {
.badge {
text-transform: uppercase;
display: inline-block;
padding: 0.1rem 0.3rem;
background: linear-gradient(45deg, var(--color-pro-1), var(--color-pro-2));
background: crimson;
border-radius: 1rem;
font-size: 0.7em;
color: #222;
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.3);
font-weight: 800;
line-height: 1;
}
.beta-tag {
background: #ee9d59;
}
.pro-badge {
display: inline-block;
background: linear-gradient(45deg, var(--color-pro-1), var(--color-pro-2));
color: #222;
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.3);
}
.templates-container {
display: flex;
flex-wrap: wrap;