feat: customize extension theme (#65)

Screenly · Dec 8, 2024 · f9646a5 · f9646a5
1 parent 71dc8a4
commit f9646a5
Show file tree

Hide file tree

Showing 9 changed files with 116 additions and 45 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -15,6 +15,7 @@
     "@eslint/eslintrc": "^3.1.0",
     "@eslint/js": "^9.14.0",
     "babel-loader": "^9.2.1",
+    "classnames": "^2.5.1",
     "copy-webpack-plugin": "^12.0.2",
     "css-loader": "^7.1.2",
     "eslint": "^9.14.0",

diff --git a/src/assets/js/components/options/authenticated-options.jsx b/src/assets/js/components/options/authenticated-options.jsx
@@ -29,9 +29,13 @@ export const AuthenticatedOptionsView = () => {
     <div>
       <div className="page" id="signed-in-page">
         <section>
-          Signed in
+          <h4 className="text-center mb-4">
+            You are already
+            <br />
+            signed in
+          </h4>
         </section>
-        <section className="mt-3">
+        <section className="mt-4">
           <button
             className="btn btn-primary w-100"
             id="sign-out"

diff --git a/src/assets/js/components/options/sign-in.jsx b/src/assets/js/components/options/sign-in.jsx
@@ -10,7 +10,7 @@ import { TokenHelpText } from '@/components/options/token-help-text';
 
 const SignInFormError = () => {
   return (
-    <div className='alert alert-danger mt-2' role='alert'>
+    <div className='text-danger mt-3' role='alert'>
       Unable to sign in. Check your credentials and internet connectivity,
       then try again.
     </div>
@@ -23,12 +23,6 @@ export const SignInForm = () => {
   const [token, setToken] = useState('');
   const dispatch = useDispatch();
 
-  const getSignUpLink = () => {
-    const baseUrl = 'https://login.screenlyapp.com/sign-up';
-    const queryParams = `next=${window.location.href}`;
-    return `${baseUrl}?${queryParams}`;
-  };
-
   const handleSignInForm = async (event) => {
     event.preventDefault();
     setIsLoading(true);
@@ -53,19 +47,22 @@ export const SignInForm = () => {
   }
 
   return (
-    <div className="page" id="sign-in-page">
+    <div className="SignInForm page" id="sign-in-page">
       <form className="sign-in">
         <div className="form-group mb-3">
           <input
-            className="form-control"
+            className="form-control shadow-none"
             id="token"
             type="password"
-            placeholder="Token"
+            placeholder="Your token"
             onChange={(event) => setToken(event.target.value)}
           />
         </div>
+
+        <TokenHelpText />
+
         <button
-          className="btn btn-primary w-100"
+          className="btn btn-primary w-100 mt-5"
           id="sign-in-submit"
           type="submit"
           onClick={handleSignInForm}
@@ -81,28 +78,12 @@ export const SignInForm = () => {
           }
         </button>
 
-        <TokenHelpText />
-
         {
           showSignInFormError
             ? <SignInFormError />
             : null
         }
       </form>
-      <section className="mt-2">
-        <div className="small text-center">
-          Need an account?
-          &nbsp;
-          <a
-            id="sign-up-link"
-            href={getSignUpLink()}
-            target="_blank"
-            rel="noreferrer"
-          >
-            Sign Up
-          </a>
-        </div>
-      </section>
     </div>
   );
 };

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

diff --git a/src/assets/js/components/popup/proposal.jsx b/src/assets/js/components/popup/proposal.jsx
@@ -309,7 +309,7 @@ export const Proposal = () => {
           <section>
             <div className="form-check">
               <input
-                className="form-check-input"
+                className="form-check-input shadow-none"
                 id="with-auth-check"
                 type="checkbox"
                 checked={saveAuthentication}

diff --git a/src/assets/js/options.jsx b/src/assets/js/options.jsx
@@ -8,8 +8,8 @@ import {
   useSelector,
   useDispatch,
 } from 'react-redux';
+import classNames from 'classnames';
 
-import 'bootstrap/scss/bootstrap.scss';
 import '@/scss/style.scss';
 
 import { SignInForm } from '@/components/options/sign-in';
@@ -24,6 +24,12 @@ const OptionsPage = () => {
   const signedIn = useSelector((state) => state.auth.signedIn);
   const dispatch = useDispatch();
 
+  const getSignUpLink = () => {
+    const baseUrl = 'https://login.screenlyapp.com/sign-up';
+    const queryParams = `next=${window.location.href}`;
+    return `${baseUrl}?${queryParams}`;
+  };
+
   useEffect(() => {
     browser.storage.sync.get('token').then((result) => {
       if (result.token) {
@@ -33,17 +39,42 @@ const OptionsPage = () => {
   }, []);
 
   return (
-    <div className='container'>
-      <div className='container container-small'>
-        <div className='mb-5 mt-5 text-center'>
-          <img src='assets/images/screenly-logo-128.png' width='64' />
+    <div className="container OptionsPage">
+      <div>
+        <div className="mb-5 mt-5 text-center">
+          <img src='assets/images/screenly-logo-128.png' width="128" />
+        </div>
+        <div
+          className={classNames(
+            'container',
+            'container-small',
+            'p-5',
+          )}
+        >
+          {
+            signedIn
+              ? <AuthenticatedOptionsView />
+              : <SignInForm />
+          }
+        </div>
+        <div
+          className="mt-4"
+        >
+          <section className="mt-2">
+            <div className="text-center">
+              Don&apos;t have an account?
+              &nbsp;
+              <a
+                id="sign-up-link"
+                href={getSignUpLink()}
+                target="_blank"
+                rel="noreferrer"
+              >
+                <strong>Sign Up</strong>
+              </a>
+            </div>
+          </section>
         </div>
-
-        {
-          signedIn
-            ? <AuthenticatedOptionsView />
-            : <SignInForm />
-        }
       </div>
     </div>
   );

diff --git a/src/assets/js/popup.jsx b/src/assets/js/popup.jsx
@@ -10,7 +10,6 @@ import {
   useSelector,
 } from 'react-redux';
 
-import 'bootstrap/scss/bootstrap.scss';
 import '@/scss/style.scss';
 import '@/scss/sweetalert-icons.scss';
 

diff --git a/src/assets/scss/style.scss b/src/assets/scss/style.scss
@@ -1,3 +1,7 @@
+$primary: #982FFF;
+
+@import 'bootstrap/scss/bootstrap';
+
 body.popup {
     .page {
         width: 350px;
@@ -27,17 +31,19 @@ body.popup {
 .container-small {
     margin: auto;
     width: 100%;
-    max-width: 350px;
+    width: 450px;
 }
 
 #sign-in-page {
-    min-height: 400px;
     h1 {
         font-weight: normal;
         font-size: 40px;
     }
 }
 
+#signed-in-page {
+}
+
 .break-anywhere {
     overflow-wrap: break-word;
     word-wrap: break-word;
@@ -54,3 +60,44 @@ body.popup {
     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;
+  }
+
+  input {
+    border: 1px solid #DEDEDE;
+    border-radius: 4px;
+
+    &::placeholder {
+      color: #B0B2BF;
+    }
+  }
+
+  a {
+    color: #009CF6;
+  }
+
+  #sign-up-link {
+    color: #000000;
+    text-decoration: none;
+
+    &:hover {
+      text-decoration: underline;
+    }
+  }
+}
+
+.TokenHelpText {
+  &.alert {
+    background-color: #F9F9F9;
+  }
+}