feat: improve page design

frouriojs · Jun 23, 2024 · caa3620 · caa3620
1 parent 2720064
commit caa3620
Show file tree

Hide file tree

Showing 9 changed files with 55 additions and 28 deletions.
diff --git a/client/components/btn/Btn.module.css b/client/components/btn/Btn.module.css
@@ -3,10 +3,10 @@
   font-weight: bold;
   color: #fff;
   letter-spacing: 0.1em;
-  background: blue;
+  background: #7af;
   border: none;
   border-radius: 6px;
-  transition: transform 0.2s;
+  transition: 0.2s;
 }
 
 .small {
@@ -26,6 +26,7 @@
 }
 
 .enabled:hover {
+  background: #44f;
   transform: scale(1.05);
 }
 

diff --git a/client/layouts/basicHeader/BasicHeader.module.css b/client/layouts/basicHeader/BasicHeader.module.css
@@ -18,7 +18,14 @@
 .appName {
   font-size: 24px;
   font-weight: bold;
-  letter-spacing: 0.2em;
+  color: var(--font-color-default);
+  letter-spacing: 0.18em;
+}
+
+@media screen and (width <= 800px) {
+  .appName {
+    font-size: 16px;
+  }
 }
 
 .userBtn {
@@ -27,12 +34,13 @@
   align-items: center;
   padding: 6px 12px;
   margin-left: auto;
+  text-transform: uppercase;
   cursor: pointer;
   border: 1px solid var(--border-color-default);
   border-radius: 6px;
   transition: 0.2s;
 }
 
 .userBtn:hover {
-  background: #eee;
+  background: #f0f0f0;
 }
diff --git a/client/layouts/basicHeader/BasicHeader.tsx b/client/layouts/basicHeader/BasicHeader.tsx
@@ -9,7 +9,7 @@ export const BasicHeader = (props: { user: UserEntity }) => {
   const { setConfirm } = useConfirm();
   const onClick = async () => {
     const confirmed = await setConfirm(
-      `ユーザー名: ${props.user.signInName}\nメールアドレス: ${props.user.email}\n\nサインアウトしてよろしいですか？`,
+      `ユーザー名: ${props.user.signInName}\nメールアドレス: ${props.user.email}\n\nサインアウトしますか？`,
     );
 
     if (confirmed) await signOut();
@@ -20,7 +20,7 @@ export const BasicHeader = (props: { user: UserEntity }) => {
       <div className={styles.main}>
         <span className={styles.appName}>{APP_NAME}</span>
         <div className={styles.userBtn} onClick={onClick}>
-          <HumanIcon size={18} fill="#555" />
+          <HumanIcon size={18} fill="#336" />
           {props.user.signInName}
         </div>
       </div>

diff --git a/client/pages/login/index.module.css b/client/pages/login/index.module.css
@@ -4,37 +4,40 @@
   left: 0;
   width: 100%;
   height: 100%;
+  overflow: auto;
 }
 
 .main {
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;
-  height: 100%;
-  backdrop-filter: blur(4px);
+  min-height: 100%;
 }
 
 .title {
-  font-size: 80px;
-  font-weight: bold;
-  text-shadow: 1px 1px white;
+  font-size: 64px;
+  color: #fff;
+  letter-spacing: 0.18em;
 }
 
-.btn {
-  display: flex;
-  gap: 8px;
-  align-items: center;
-  padding: 8px 12px;
+@media screen and (width <= 800px) {
+  .title {
+    font-size: 32px;
+    text-align: center;
+  }
+}
+
+.credit {
+  position: fixed;
+  bottom: 10px;
+  left: 0;
+  width: 100%;
   font-size: 14px;
-  font-weight: bold;
-  color: white;
-  cursor: pointer;
-  background: #222;
-  border-radius: 4px;
-  transition: 0.2s background;
+  color: #fff;
+  text-align: center;
 }
 
-.btn:hover {
-  background: #444;
+.link:hover {
+  text-decoration: underline;
 }
diff --git a/client/pages/login/index.page.tsx b/client/pages/login/index.page.tsx
@@ -20,12 +20,12 @@ const Login = () => {
   return (
     <div
       className={styles.container}
-      style={{ background: `center/cover url('${staticPath.images.odaiba_jpg}')` }}
+      style={{ background: `center/cover url('${staticPath.images.bg_jpg}')` }}
     >
       {user.inited && user.data === null ? (
         <div className={styles.main}>
           <div className={styles.title}>{APP_NAME}</div>
-          <Spacer axis="y" size={24} />
+          <Spacer axis="y" size={36} />
           <Authenticator
             signUpAttributes={['email']}
             services={{
@@ -40,11 +40,21 @@ const Login = () => {
                 }),
             }}
           />
-          <Spacer axis="y" size={40} />
+          <Spacer axis="y" size={60} />
         </div>
       ) : (
         <Loading visible />
       )}
+      <div className={styles.credit}>
+        <a
+          className={styles.link}
+          href="https://www.freepik.com/free-vector/gradient-blue-background_23985231.htm"
+          target="_brank"
+          title="Freepik | Create great designs, faster"
+        >
+          Image by freepik
+        </a>
+      </div>
     </div>
   );
 };

diff --git a/client/public/images/bg.jpg b/client/public/images/bg.jpg
diff --git a/client/public/images/odaiba.jpg b/client/public/images/odaiba.jpg
diff --git a/client/styles/globals.css b/client/styles/globals.css
@@ -16,6 +16,11 @@ a {
   margin: 0;
 }
 
+:root {
+  --border-color-default: #eee;
+  --font-color-default: #336;
+}
+
 ::-webkit-scrollbar {
   width: 8px;
 }

diff --git a/server/api/@constants/index.ts b/server/api/@constants/index.ts
@@ -1,3 +1,3 @@
-export const APP_NAME = 'Next frourio starter';
+export const APP_NAME = 'NEXT FROURIO STARTER';
 
 export const BRANDED_ID_NAMES = ['user', 'task'] as const;