movie-web/extension
1
0
Fork 0
mirror of https://github.com/movie-web/extension.git synced 2025-09-13 07:03:24 +00:00
Code Issues Packages Projects Releases Wiki Activity

SetupScreen completed

Browse Source
This commit is contained in:
mrjvs
2024-02-07 18:42:57 +01:00
parent 725e9641e2
commit 0092b4191e
3 changed files with 64 additions and 7 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
src/components/Icon.tsx
View File

@@ -5,10 +5,20 @@ const icons = {
cookie: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M247.2 17c-22.1-3.1-44.6 .9-64.4 11.4l-74 39.5C89.1 78.4 73.2 94.9 63.4 115L26.7 190.6c-9.8 20.1-13 42.9-9.1 64.9l14.5 82.8c3.9 22.1 14.6 42.3 30.7 57.9l60.3 58.4c16.1 15.6 36.6 25.6 58.7 28.7l83 11.7c22.1 3.1 44.6-.9 64.4-11.4l74-39.5c19.7-10.5 35.6-27 45.4-47.2l36.7-75.5c9.8-20.1 13-42.9 9.1-64.9l-14.6-82.8c-3.9-22.1-14.6-42.3-30.7-57.9L388.9 57.5c-16.1-15.6-36.6-25.6-58.7-28.7L247.2 17zM208 144a32 32 0 1 1 0 64 32 32 0 1 1 0-64zM144 336a32 32 0 1 1 64 0 32 32 0 1 1 -64 0zm224-64a32 32 0 1 1 0 64 32 32 0 1 1 0-64z"/></svg>`,
windows: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M432 64H208c-8.8 0-16 7.2-16 16V96H128V80c0-44.2 35.8-80 80-80H432c44.2 0 80 35.8 80 80V304c0 44.2-35.8 80-80 80H416V320h16c8.8 0 16-7.2 16-16V80c0-8.8-7.2-16-16-16zM0 192c0-35.3 28.7-64 64-64H320c35.3 0 64 28.7 64 64V448c0 35.3-28.7 64-64 64H64c-35.3 0-64-28.7-64-64V192zm64 32c0 17.7 14.3 32 32 32H288c17.7 0 32-14.3 32-32s-14.3-32-32-32H96c-17.7 0-32 14.3-32 32z"/></svg>`,
shield: `<svg xmlns="http://www.w3.org/2000/svg" width="1em" height="1em" fill="currentColor" viewBox="0 0 512 512"><!--!Font Awesome Free 6.5.1 by @fontawesome - https://fontawesome.com License - https://fontawesome.com/license/free Copyright 2024 Fonticons, Inc.--><path d="M269.4 2.9C265.2 1 260.7 0 256 0s-9.2 1-13.4 2.9L54.3 82.8c-22 9.3-38.4 31-38.3 57.2c.5 99.2 41.3 280.7 213.6 363.2c16.7 8 36.1 8 52.8 0C454.7 420.7 495.5 239.2 496 140c.1-26.2-16.3-47.9-38.3-57.2L269.4 2.9zM160 154.4c0-5.8 4.7-10.4 10.4-10.4h.2c3.4 0 6.5 1.6 8.5 4.3l40 53.3c3 4 7.8 6.4 12.8 6.4h48c5 0 9.8-2.4 12.8-6.4l40-53.3c2-2.7 5.2-4.3 8.5-4.3h.2c5.8 0 10.4 4.7 10.4 10.4V272c0 53-43 96-96 96s-96-43-96-96V154.4zM216 288a16 16 0 1 0 0-32 16 16 0 1 0 0 32zm96-16a16 16 0 1 0 -32 0 16 16 0 1 0 32 0z"/></svg>`,
logo: `<svg width="1em" height="1em" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M11.2254 4.95486L10.5285 5.65174L9.83162 4.95486L10.5285 4.25799L7.7414 1.4709L7.04453 2.16777L6.34766 1.4709L7.04453 0.774022L6.34766 0.0771484L0.0761918 6.34861L0.773066 7.04549L1.46994 6.34861L2.16681 7.04549L1.46994 7.74236L4.25743 10.5299L4.95431 9.83298L5.65118 10.5299L4.95431 11.2267L5.65118 11.9236L11.9226 5.65214L11.2254 4.95486ZM2.86529 6.35021L2.16681 5.65174L2.86369 4.95487L3.56056 5.65174L2.86529 6.35021ZM4.25904 4.95647L3.56056 4.25799L4.25703 3.56152L4.95391 4.25839L4.25904 4.95647ZM5.65278 3.56272L4.95431 2.86424L5.65078 2.16777L6.34766 2.86464L5.65278 3.56272ZM6.34766 9.83258L5.65078 9.13571L6.34766 8.43883L7.04453 9.13571L6.34766 9.83258ZM7.7414 8.43883L7.04453 7.74196L7.741 7.04549L8.43788 7.74236L7.7414 8.43883ZM9.13515 7.04509L8.43828 6.34821L9.13475 5.65174L9.83162 6.34861L9.13515 7.04509Z" fill="currentColor"/></svg>`,
};
export type Icons = keyof typeof icons;
export function Icon(props: { name: Icons }) {
// eslint-disable-next-line react/no-danger
return <div dangerouslySetInnerHTML={{ __html: icons[props.name] }} />;
return (
<div
// eslint-disable-next-line react/no-danger
dangerouslySetInnerHTML={{ __html: icons[props.name] }}
style={{
width: '1em',
height: '1em',
}}
/>
);
}

41
src/components/SetupScreen.css
View File

@@ -0,0 +1,41 @@
.setup-screen .title {
font-size: 1.5rem;
color: white;
}
.setup-screen .paragraph {
font-size: 1rem;
color: #666485;
max-width: 220px;
}
.setup-screen .top {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
flex: 1;
}
.setup-screen {
display: flex;
flex-direction: column;
height: 100%;
width: 100%;
box-sizing: border-box;
padding: 2rem;
text-align: center;
}
.setup-screen .icon {
background-color: #0b0b1b77;
color: #945DCC;
height: 40px;
font-size: 20px;
width: 40px;
border-radius: 9999px;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 20px;
}

16
src/components/SetupScreen.tsx
View File

@@ -3,6 +3,7 @@ import { useCallback } from 'react';
import { Button } from '~components/Button';
import './SetupScreen.css';
import { Icon } from '~components/Icon';
export function SetupScreen() {
const open = useCallback(() => {
@@ -11,11 +12,16 @@ export function SetupScreen() {
}, []);
return (
<div className="disabled">
<h1 className="title">Le&apos;s get this set up!</h1>
<p style={{ paddingBottom: 25, paddingTop: 10 }}>
To get started, we need to setup some things first. Click the button below to continue.
</p>
<div className="setup-screen">
<div className="top">
<div className="icon">
<Icon name="logo" />
</div>
<h1 className="title">Le&apos;s get this set up!</h1>
<p className="paragraph" style={{ paddingBottom: 25, paddingTop: 10 }}>
To get started, we need to setup some things first. Click the button below to continue.
</p>
</div>
<Button onClick={open} full>
Continue
</Button>