fix: adjust styles based on the given design

Screenly · Dec 10, 2024 · fce1150 · fce1150
1 parent e31c5be
commit fce1150
Show file tree

Hide file tree

Showing 5 changed files with 77 additions and 84 deletions.
diff --git a/src/assets/js/components/popup/popup-spinner.jsx b/src/assets/js/components/popup/popup-spinner.jsx
@@ -2,7 +2,13 @@ import React from 'react';
 
 export const PopupSpinner = () => {
   return (
-    <div className="page" id="working-page">
+    <div
+      className="page"
+      id="working-page"
+      style={{
+        height: '300px',
+      }}
+    >
       <div className="align-items-center d-flex h-100 justify-content-center">
         <div className="spinner spinner-border">
           <span className="sr-only"></span>

diff --git a/src/assets/js/components/popup/settings.jsx b/src/assets/js/components/popup/settings.jsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
+import classNames from 'classnames';
 
 import { signOut } from '@/features/popup/popupSlice';
 
@@ -16,13 +17,19 @@ export const Settings = () => {
   };
 
   return (
-    <div className="page" id="success-page">
+    <div className="page mt-3" id="success-page">
       <div className="d-flex flex-column">
         <section
-          className="align-items-center d-flex flex-grow-1 justify-content-center"
+          className={classNames(
+            'align-items-center',
+            'd-flex',
+            'flex-grow-1',
+            'justify-content-center',
+            'border-bottom-0',
+          )}
         >
           <div>
-            <h3 className="text-center mb-3">
+            <h3 className="text-center">
               You are already
               <br />
               signed in

diff --git a/src/assets/js/components/popup/sign-in.jsx b/src/assets/js/components/popup/sign-in.jsx
@@ -3,6 +3,7 @@
 import React from 'react';
 import { useState } from 'react';
 import { useDispatch } from 'react-redux';
+import classNames from 'classnames';
 
 import { callApi } from '@/main';
 import {
@@ -13,7 +14,7 @@ import { TokenHelpText } from '@/components/popup/token-help-text';
 const SignInFormError = ({ message }) => {
   return (
     <div className='text-danger mt-3' role='alert'>
-      Unable to sign in. Check your credentials and internet connectivity,
+      Unable to sign in? Check your credentials and internet connectivity,
       then try again.
 
       {message}
@@ -51,23 +52,33 @@ export const SignInForm = () => {
   }
 
   return (
-    <div className="page mt-4" id="sign-in-page">
+    <div className="page mt-2" id="sign-in-page">
       <div className="d-flex flex-column">
-        <section className="align-items-center d-flex flex-grow-1 justify-content-center border-0">
+        <section
+          className={classNames(
+            'align-items-center',
+            'd-flex',
+            'flex-grow-1',
+            'justify-content-center',
+            'border-0',
+          )}
+        >
           <div className="text-center">
-            <img src="assets/images/screenly-logo-128.png" width="64" />
-            <h1 className="mb-1 mt-2">Screenly</h1>
-            <a href="https://screenly.io">
-              screenly.io
-            </a>
+            <h3 className="mb-1">Sign In</h3>
           </div>
         </section>
         <section className="border-0">
           <form>
-            <div className="form-group mb-3">
+            <div className="mb-3">
+              <label className="form-label">
+                <small>
+                  Token
+                </small>
+              </label>
               <input
                 className="form-control shadow-none"
                 onChange={(event) => setToken(event.target.value)}
+                placeholder="Type here..."
                 type="password"
               />
             </div>

diff --git a/src/assets/js/components/popup/token-help-text.jsx b/src/assets/js/components/popup/token-help-text.jsx
@@ -2,7 +2,7 @@ import React from 'react';
 
 export const TokenHelpText = () => {
   return (
-    <div className="alert mt-3 mb-0 TokenHelpText">
+    <div className="alert mt-3 mb-1 TokenHelpText">
       <p className="mb-0">
         For instructions on how to get your token, visit&nbsp;
         <a

diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
@@ -1,31 +1,32 @@
 $primary: #982FFF;
 
-@import 'bootstrap/scss/bootstrap';
+@use 'bootstrap/scss/bootstrap' with (
+  $primary: $primary
+);
 
 body.popup {
-    .page {
-        width: 350px;
-        min-height: 300px;
-        display: grid;
-    }
+  .page {
+    min-width: 370px;
+    display: grid;
+  }
 
-    section {
-        padding: 20px;
-        border-bottom: 1px solid rgba(0, 0, 0, 0.1);
-        font-size: 0.8rem;
-        width: 100%;
-        input {
-            font-size: 1rem;
-        }
+  section {
+    padding: 20px;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+    font-size: 0.8rem;
+    width: 100%;
+    input {
+      font-size: 1rem;
     }
+  }
 
-    label {
-        font-size: 1rem;
-    }
+  label {
+    font-size: 1rem;
+  }
 
-    h5 {
-        margin-bottom: 0;
-    }
+  h5 {
+    margin-bottom: 0;
+  }
 }
 
 @mixin text-selection {
@@ -41,55 +42,20 @@ body.popup {
   @include text-selection;
 }
 
-.container-small {
-    margin: auto;
-    width: 100%;
-    width: 450px;
-}
-
 #sign-in-page {
-    h1 {
-        font-weight: normal;
-        font-size: 40px;
-    }
-}
-
-#signed-in-page {
-}
-
-.break-anywhere {
-    overflow-wrap: break-word;
-    word-wrap: break-word;
-    -ms-word-break: break-all;
-    word-break: break-all;
-    word-break: break-word;
-    -ms-hyphens: auto;
-    -moz-hyphens: auto;
-    -webkit-hyphens: auto;
-    hyphens: auto;
-}
-
-#fail-message {
-    overflow-wrap: break-word;
-    max-width: 300px;
-}
-
-.OptionsPage {
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  height: 100vh;
-
-  & .container {
-    border: 0.5px solid #DEDEDE;
-    border-radius: 8px;
+  h1 {
+    font-weight: normal;
+    font-size: 40px;
   }
 
   input {
     border: 1px solid #DEDEDE;
     border-radius: 4px;
 
+    &:focus {
+      border-color: $primary;
+    }
+
     &::placeholder {
       color: #B0B2BF;
     }
@@ -98,15 +64,18 @@ body.popup {
   a {
     color: #009CF6;
   }
+}
 
-  #sign-up-link {
-    color: #000000;
-    text-decoration: none;
-
-    &:hover {
-      text-decoration: underline;
-    }
-  }
+.break-anywhere {
+    overflow-wrap: break-word;
+    word-wrap: break-word;
+    -ms-word-break: break-all;
+    word-break: break-all;
+    word-break: break-word;
+    -ms-hyphens: auto;
+    -moz-hyphens: auto;
+    -webkit-hyphens: auto;
+    hyphens: auto;
 }
 
 .TokenHelpText {