Fix: broken flex

planetarium · Oct 28, 2024 · 4edd02f · 4edd02f
1 parent a9b5d9e
commit 4edd02f
Show file tree

Hide file tree

Showing 8 changed files with 49 additions and 66 deletions.
diff --git a/packages/renderer/src/components/Content/BaseContent.tsx b/packages/renderer/src/components/Content/BaseContent.tsx
@@ -3,7 +3,7 @@ import {ReactNode} from 'react';
 export function BaseContent({children}: {children: ReactNode}) {
   return (
     <div
-      className="text-white backdrop-blur-[10px] p-9 flex flex-col"
+      className="text-white backdrop-blur-[10px] p-6 flex flex-col rounded-lg"
       style={{
         background: '#1F2023B3',
       }}

diff --git a/packages/renderer/src/components/Content/Login.tsx b/packages/renderer/src/components/Content/Login.tsx
@@ -1,5 +1,15 @@
-import {TextField, Checkbox, Heading, Select, Flex, Button} from '@radix-ui/themes';
+import {
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue,
+} from '../UI/select';
+import { Input } from '../UI/input'
 import {useForm} from '@tanstack/react-form';
+import { Button } from '../UI/button';
 
 export function Login() {
   const {Field, handleSubmit, state} = useForm({
@@ -16,76 +26,66 @@ export function Login() {
 
   return (
     <>
-      <Heading className="mb-6 text-3xl">Login</Heading>
+      <h1 className="font-bold text-3xl mb-6">Login</h1>
       <form
+        className="flex flex-col gap-2"
         onSubmit={e => {
           e.preventDefault();
           handleSubmit();
         }}
       >
-        <Flex
-          gap="4"
-          direction="column"
-          width="420px"
-        >
           <Field
             name="planet"
             children={({state, handleChange, handleBlur}) => (
-              <Select.Root
-                size="3"
-                defaultValue="0x000000000000"
-              >
-                <Select.Trigger
-                  id="planet"
-                  placeholder="Planet"
-                />
-                <Select.Content>
-                  <Select.Group>
-                    <Select.Label>Planets</Select.Label>
-                    <Select.Item value="0x000000000000">Odin</Select.Item>
-                    <Select.Item value="0x000000000001">Heimdall</Select.Item>
-                  </Select.Group>
-                </Select.Content>
-              </Select.Root>
+              <Select defaultValue="0x000000000000">
+                <SelectTrigger id="planet">
+                <SelectValue placeholder="Planets" />
+
+                  </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>Planets</SelectLabel>
+                    <SelectItem value="0x000000000000">Odin</SelectItem>
+                    <SelectItem value="0x000000000001">Heimdall</SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
             )}
           ></Field>
 
           <Field
             name="address"
             children={({state, handleChange, handleBlur}) => (
-              <Select.Root
-                size="3"
-                defaultValue="0x3dfc24e309b4d5dc24f53fba70a3b97debca5ada"
-              >
-                <Select.Trigger placeholder="Nine Chronicles Address" />
-                <Select.Content>
-                  <Select.Group>
-                    <Select.Label>Address</Select.Label>
-                    <Select.Item value="0x3dfc24e309b4d5dc24f53fba70a3b97debca5ada">
+              <Select defaultValue="0x3dfc24e309b4d5dc24f53fba70a3b97debca5ada">
+                <SelectTrigger>
+                  <SelectValue placeholder="Address" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>Address</SelectLabel>
+                    <SelectItem value="0x3dfc24e309b4d5dc24f53fba70a3b97debca5ada">
                       0x3dfc24e309b4d5dc24f53fba70a3b97debca5ada
-                    </Select.Item>
-                  </Select.Group>
-                </Select.Content>
-              </Select.Root>
+                    </SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
             )}
           ></Field>
 
           <Field
             name="password"
             children={({state, handleChange, handleBlur}) => (
-              <TextField.Root
-                size="3"
-                type="password"
+              <Input
+                typeof="password"
                 defaultValue={state.value}
                 onChange={e => handleChange(e.target.value)}
                 onBlur={handleBlur}
                 placeholder="Passphrase"
               />
             )}
           />
-          <div className="flex items-center justify-between mt-6S">
+          <div className="flex items-center justify-between pt-6">
             <Button
-              size="3"
               className="font-bold rounded focus:outline-none focus:shadow-outline"
               type="button"
             >
@@ -98,7 +98,6 @@ export function Login() {
               Forgot Password?
             </a>
           </div>
-        </Flex>
       </form>
     </>
   );

diff --git a/packages/renderer/src/components/Layout/BaseBackground.tsx b/packages/renderer/src/components/Layout/BaseBackground.tsx
@@ -5,6 +5,8 @@ export const BaseBackground = styled.div({
   '-webkit-app-region': 'drag',
   display: 'flex',
   flexDirection: 'column',
+  justifyContent: "space-between",
+  alignContent: "center",
   background: `url(${launcherBackground}) center/cover repeat`,
   width: '100vw',
   height: '100vh',

diff --git a/packages/renderer/src/components/Layout/BaseNav.tsx b/packages/renderer/src/components/Layout/BaseNav.tsx
@@ -5,6 +5,5 @@ export const BaseNav  = styled.div({
   margin: '2rem',
   justifyContent: 'space-between',
   alignItems: 'center',
-  align: 'flex-end',
   gap: '2rem',
 });
diff --git a/packages/renderer/src/components/Layout/index.tsx b/packages/renderer/src/components/Layout/index.tsx
@@ -19,14 +19,14 @@ export function Layout() {
         <TopMenu />
         <TopUserInfo />
       </BaseNav>
-      <div className="justify-center self-center flex-grow">
+      <div className="flex justify-center">
         <BaseContent>
           <Login />
         </BaseContent>
       </div>
       <BaseNav>
         <BaseNodeInfo />
-        <div className="flex gap-2 items-center">
+        <div className="flex gap-2">
           <GameStartButton />
           <RestartButton />
           <SettingButton />

diff --git a/packages/renderer/src/components/Menubar/Menu.tsx b/packages/renderer/src/components/Menubar/Menu.tsx
@@ -3,12 +3,11 @@ import styled from '@emotion/styled';
 export const Menu = styled.div({
   color: 'white',
   background: 'rgba(31, 32, 35, 0.70)',
-  border: '2px solid transparent',
-  borderImage: 'linear-gradient(#7A7369, #EAC48B ,#7A7369)',
+  borderRadius: '0.5rem',
   borderImageSlice: '1',
   backdropFilter: 'blur(4px)',
   display: 'flex',
-  padding: '8px 12px',
+  padding: '8px 8px',
   alignItems: 'center',
-  gap: '1rem',
+  gap: '0.5rem',
 });
diff --git a/packages/renderer/src/components/Modal/Modal.tsx b/packages/renderer/src/components/Modal/Modal.tsx
diff --git a/packages/renderer/src/store/Modal.ts b/packages/renderer/src/store/Modal.ts