1
0
mirror of https://github.com/chinchang/web-maker.git synced 2025-07-09 16:06:21 +02: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} item={template}
focusable focusable
onClick={onTemplateSelect.bind(null, template, false)} onClick={onTemplateSelect.bind(null, template, false)}
hasOptions={false}
/> />
); );
})} })}

View File

@ -11,7 +11,8 @@ export function ItemTile({
onRemoveBtnClick, onRemoveBtnClick,
onToggleVisibilityBtnClick, onToggleVisibilityBtnClick,
focusable, focusable,
inline inline,
hasOptions = true
}) { }) {
return ( return (
<div <div
@ -58,7 +59,7 @@ export function ItemTile({
</div> </div>
<div className="flex flex-v-center"> <div className="flex flex-v-center">
{item.img ? ( {item.img ? (
<div> <div class="d-f">
<img <img
class="saved-item-tile__img" class="saved-item-tile__img"
height="40" height="40"
@ -82,6 +83,7 @@ export function ItemTile({
</div> </div>
) : null} ) : null}
</div> </div>
{hasOptions && (
<div class="saved-item-tile__meta"> <div class="saved-item-tile__meta">
<HStack justify="space-between"> <HStack justify="space-between">
<div> <div>
@ -106,6 +108,7 @@ export function ItemTile({
</div> </div>
</HStack> </HStack>
</div> </div>
)}
</div> </div>
); );
} }

View File

@ -1,3 +1,3 @@
export const ProBadge = () => { 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() { 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; 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 { .is-extension .web-maker-with-tag:after {
display: none; display: none;
} }
@ -2184,18 +2174,26 @@ while the theme CSS file is loading */
.stack > * { .stack > * {
margin: 0; margin: 0;
} }
.badge {
.pro-badge { text-transform: uppercase;
display: inline-block; display: inline-block;
padding: 0.1rem 0.3rem; padding: 0.1rem 0.3rem;
background: linear-gradient(45deg, var(--color-pro-1), var(--color-pro-2)); background: crimson;
border-radius: 1rem; border-radius: 1rem;
font-size: 0.7em; font-size: 0.7em;
color: #222; color: #222;
box-shadow: inset 2px 2px 3px rgba(0, 0, 0, 0.3);
font-weight: 800; font-weight: 800;
line-height: 1; 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 { .templates-container {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;