chore: update theme colors in settings.json and tailwind.config

research-software-directory · May 23, 2023 · cc007e0 · cc007e0
1 parent 53ce950
commit cc007e0
Show file tree

Hide file tree

Showing 38 changed files with 252 additions and 181 deletions.
diff --git a/deployment/rsd/data/settings.json b/deployment/rsd/data/settings.json
@@ -2,9 +2,17 @@
   "host": {
     "name": "rsd",
     "email": "[email protected]",
+    "emailHeaders": [],
     "logo_url": "/images/logo-escience.svg",
     "website": "https://www.esciencecenter.nl",
-    "feedback_email": "[email protected]"
+    "feedback": {
+      "enabled": true,
+      "url": "[email protected]",
+      "issues_page_url": "https://github.com/research-software-directory/RSD-as-a-service/issues"
+    },
+    "login_info_url": "https://research-software-directory.github.io/documentation/getting-access.html",
+    "terms_of_service_url": "/page/terms-of-service/",
+    "privacy_statement_url": "/page/privacy-statement/"
   },
   "links": [
     {
@@ -13,7 +21,7 @@
       "target": "_self"
     },
     {
-      "label": "Documentation",
+      "label": "User Documentation",
       "url": "https://research-software-directory.github.io/documentation",
       "target": "_blank"
     },
@@ -35,14 +43,20 @@
         "base-100": "#fff",
         "base-200": "#eeeeee",
         "base-300": "#dcdcdc",
+        "base-400": "#bdbdbd",
+        "base-500": "#9e9e9e",
+        "base-600": "#757575",
+        "base-700": "#232323",
+        "base-800": "#111",
+        "base-900": "#000",
         "base-content": "rgba(34,36,37,1)",
         "base-content-secondary": "rgba(34,36,37,0.7)",
         "base-content-disabled": "rgba(34,36,37,0.45)",
-        "primary": "#01ad83",
+        "primary": "#006649",
         "primary-content": "#fff",
         "secondary": "#000",
         "secondary-content": "#fff",
-        "accent": "#73095d",
+        "accent": "#01ad83",
         "accent-content": "#fff",
         "error": "#e53935",
         "error-content": "#fff",
@@ -72,6 +86,12 @@
         "base-100": "#0a0a0a",
         "base-200": "#151515",
         "base-300": "#2a2a2a",
+        "base-400": "#757575",
+        "base-500": "#9e9e9e",
+        "base-600": "#bdbdbd",
+        "base-700": "#dcdcdc",
+        "base-800": "#eeeeee",
+        "base-900": "#fff",
         "base-content": "rgba(255,255,255,0.87)",
         "base-content-secondary": "rgba(255,255,255,0.7)",
         "base-content-disabled": "rgba(255,255,255,0.45)",

diff --git a/deployment/rsd/data/settings.json.license b/deployment/rsd/data/settings.json.license
@@ -1,4 +1,4 @@
-SPDX-FileCopyrightText: 2022 Dusan Mijatovic (dv4all)
-SPDX-FileCopyrightText: 2022 dv4all
+SPDX-FileCopyrightText: 2022 - 2023 Dusan Mijatovic (dv4all)
+SPDX-FileCopyrightText: 2022 - 2023 dv4all
 
 SPDX-License-Identifier: Apache-2.0
diff --git a/frontend/components/GlobalSearchAutocomplete/index.tsx b/frontend/components/GlobalSearchAutocomplete/index.tsx
@@ -140,7 +140,7 @@ export default function GlobalSearchAutocomplete(props: Props) {
               fill="#707070"/>
           </svg>
         </div>
-        <input className="px-2 pl-8 py-2 bg-transparent rounded-sm border border-white border-opacity-50 focus:outline-0 w-full focus:bg-white focus:text-black duration-200"
+        <input className="px-2 pl-8 py-2 bg-transparent rounded-sm border border-base-600 focus:outline-0 w-full focus:bg-base-100 focus:text-base-900 duration-200"
           data-testid="global-search"
           placeholder="Search or jump to..."
           autoComplete="off"
@@ -154,7 +154,7 @@ export default function GlobalSearchAutocomplete(props: Props) {
         {isOpen &&
           <div
             data-testid="global-search-list"
-            className="shadow-xl absolute top-[50px] w-full left-0 bg-white text-black py-2 rounded-sm"
+            className="shadow-xl absolute top-[50px] w-full left-0 bg-base-100 text-base-900 py-2 rounded-sm"
             style={{
               maxHeight: '50vh',
               overflow: 'auto'

diff --git a/frontend/components/cards/CardTitleSubtitle.tsx b/frontend/components/cards/CardTitleSubtitle.tsx
@@ -15,7 +15,7 @@ export default function CardTitleSubtitle({title,subtitle}:CardTitleSubtitleProp
       {title}
     </h2>
     <div className="py-2">
-      <p className="text-gray-600 line-clamp-3 break-words">
+      <p className="text-base-700 line-clamp-3 break-words">
         {subtitle}
       </p>
     </div>

diff --git a/frontend/components/cards/KeywordList.tsx b/frontend/components/cards/KeywordList.tsx
@@ -13,7 +13,7 @@ export default function KeywordList({keywords=[], visibleNumberOfKeywords = 3}:
   if (!keywords || keywords.length===0) return null
 
   return (
-    <ul className="flex flex-wrap items-start gap-2 text-gray-600 text-sm mt-4">
+    <ul className="flex flex-wrap items-start gap-2 text-base-700 text-sm mt-4">
       {// limits the keywords to 'visibleNumberOfKeywords' per software.
         keywords?.slice(0, visibleNumberOfKeywords)
           .map((keyword:string, index: number) => (

diff --git a/frontend/components/cookies/CookieConsentMatomo.tsx b/frontend/components/cookies/CookieConsentMatomo.tsx
@@ -60,12 +60,12 @@ export default function CookieConsentMatomo({matomo, route}: CookieConsentMatomo
       data-testid="cookie-consent-matomo"
     >
       <div className="container mx-auto sm:px-20">
-          <div className="border border-b-base-content border-t-4 border-x-4 border-b-0 bg-white shadow-lg p-6 rounded-tr-3xl sm:w-96">
+          <div className="border border-b-base-content border-t-4 border-x-4 border-b-0 bg-base-100 shadow-lg p-6 rounded-tr-3xl sm:w-96">
             <div className="w-16 mx-auto relative  mb-3">
               <CookieTwoToneIcon className="scale-[2]  mb-3" color="primary" fontSize="large"/>
             </div>
             <span
-              className="w-full block leading-normal text-gray-800 text-md mb-3">We use&nbsp;
+              className="w-full block leading-normal text-base-800 text-md mb-3">We use&nbsp;
               <span className="text-primary">
                 <Link href="/cookies" passHref target="_blank" className="text-primary" rel="noopener noreferrer">
                   cookies
@@ -75,7 +75,7 @@ export default function CookieConsentMatomo({matomo, route}: CookieConsentMatomo
               matomo.org
             </Link> to provide a better user experience. </span>
           <div className="flex items-center justify-between">
-            <Link href="/cookies" passHref className="text-xs text-gray-400 mr-1 hover:text-gray-800 hover:underline">
+            <Link href="/cookies" passHref className="text-xs text-base-400 mr-1 hover:text-base-800 hover:underline">
               Read more
             </Link>
             <div className="flex gap-4">

diff --git a/frontend/components/feedback/FeedbackPanelButton.tsx b/frontend/components/feedback/FeedbackPanelButton.tsx
@@ -71,7 +71,7 @@ User Agent: ${navigator.userAgent}`
       {/*If  mobile size */}
       <div className="block md:hidden">
         <Divider/>
-        <button className="flex md:hidden hover:bg-gray-100 hover:text-primary w-full py-2 px-4"
+        <button className="flex md:hidden w-full py-2 px-4"
           onClick={handleClickOpen}>
           Send feedback
         </button>
@@ -83,14 +83,14 @@ User Agent: ${navigator.userAgent}`
         onClose={handleClose}
         aria-labelledby="responsive-dialog-title"
       >
-        <div className="h-full w-full bg-[#232323] p-5 ">
+        <div className="h-full w-full bg-base-700 p-5 ">
           <div className="mx-auto max-w-[500px]">
-            <div className="text-white text-xl mb-4">
+            <div className="text-base-100 text-xl mb-4">
               Send Feedback
             </div>
             <textarea
               autoFocus
-              className="placeholder:text-gray-500 outline-0 p-2 w-full h-28 text-sm bg-transparent text-white border border-gray-600 rounded"
+              className="placeholder:text-base-500 outline-0 p-2 w-full h-28 text-sm bg-base-700 text-base-100 border border-base-600 rounded"
               placeholder="Ideas on how to improve this page or report an issue?" value={text}
               onChange={e => setText(e.target.value)}>
           </textarea>
@@ -106,13 +106,13 @@ User Agent: ${navigator.userAgent}`
 
             <div className="flex justify-end gap-4 w-full my-2">
               <button
-                className="text-sm text-white border border-gray-500 text-opacity-60 rounded px-3 py-1 hover:opacity-90 active:opacity-95"
+                className="text-sm text-base-200 border border-base-400 opacity-60 rounded px-3 py-1 hover:opacity-90 active:opacity-95"
                 onClick={closeAndClean}>
                 Cancel
               </button>
               <a
                 onClick={closeAndClean}
-                className="text-sm text-white hover:text-white bg-primary px-3 py-1 rounded hover:opacity-90 active:opacity-95"
+                className="text-sm text-base-100 hover:text-base-100 bg-primary px-3 py-1 rounded hover:opacity-90 active:opacity-95"
                 target="_blank"
                 rel="noreferrer"
                 href={`mailto:${feedback_email}?subject=${encodeURIComponent('Feedback about the RSD')}&body=${mailBody()}`}

diff --git a/frontend/components/home/helmholtz/index.tsx b/frontend/components/home/helmholtz/index.tsx
@@ -285,18 +285,18 @@ export default function HelmholtzHome() {
   }
 
   return (
-     <div className="bg-white" data-testid="rsd-helmholtz-home">
+     <div className="bg-base-100" data-testid="rsd-helmholtz-home">
 
         <AppHeader/>
 
         {/* Head and claim */}
         <div className="bg-secondary bg-landing-page mb-10">
-          <div className="flex flex-row flex-wrap container mx-auto px-6 md:px-10 pt-16 pb-12 max-w-screen-xl text-white">
+          <div className="flex flex-row flex-wrap container mx-auto px-6 md:px-10 pt-16 pb-12 max-w-screen-xl text-base-100">
             <div className="min-w-min flex flex-col">
               <LogoHelmholtz width="220" />
               <div className="pt-1 pb-12">Research for grand challenges.</div>
               {/* <a onClick={handleClickOpen}>
-                <div className="w-[250px] bg-[#05e5ba] hover:bg-primary text-secondary hover:text-white text-center font-medium text-2xl py-4 px-6 rounded-sm">
+                <div className="w-[250px] bg-[#05e5ba] hover:bg-primary text-secondary hover:text-base-100 text-center font-medium text-2xl py-4 px-6 rounded-sm">
                   Add your software
                 </div>
               </a> */}
@@ -317,7 +317,7 @@ export default function HelmholtzHome() {
             <div className="flex">
               <Link href="/software" passHref>
                 <div
-                  className="w-[250px] bg-[#05e5ba] hover:bg-primary text-secondary hover:text-white text-center font-medium text-2xl py-4 px-6 rounded-sm">
+                  className="w-[250px] bg-[#05e5ba] hover:bg-primary text-secondary hover:text-base-100 text-center font-medium text-2xl py-4 px-6 rounded-sm">
                   Browse software
                 </div>
               </Link>
@@ -326,7 +326,7 @@ export default function HelmholtzHome() {
         </div>
 
         {/* Software meta repository */}
-        <div className="conainer mx-auto my-10 max-w-screen-xl text-white bg-secondary">
+        <div className="conainer mx-auto my-10 max-w-screen-xl text-base-100 bg-secondary">
           <div
             id="backgroundContainer"
             className="w-full h-full p-12 bg-blend-multiply bg-center bg-cover bg-secondary bg-opacity-75 relative"
@@ -373,11 +373,11 @@ export default function HelmholtzHome() {
               <div className='text-center text-2xl py-4'>
                 <div className="pb-4">For Research Software Engineers</div>
                 <div className="grid gridl-cols-1 sm:grid-cols-2 gap-8 pt-4">
-                  <div className="aspect-video grid place-items-center bg-center bg-cover group text-white bg-promote">
+                  <div className="aspect-video grid place-items-center bg-center bg-cover group text-base-100 bg-promote">
                     <div className="group-hover:hidden text-4xl">Promote</div>
                     <div className="hidden group-hover:block justify-center m-2">Increase the impact of your software by reaching a broader audience</div>
                   </div>
-                  <div className="aspect-video grid place-items-center bg-center bg-cover group text-white bg-reference">
+                  <div className="aspect-video grid place-items-center bg-center bg-cover group text-base-100 bg-reference">
                     <div className="group-hover:hidden text-4xl">Impact</div>
                     <div className="hidden group-hover:block justify-center m-2">Gain acknowledgement by proper citation of your code</div>
                   </div>
@@ -386,19 +386,19 @@ export default function HelmholtzHome() {
               <div className='text-center text-2xl my-4'>
                 <div className="mb-4">For Researchers</div>
                 <div className="grid gridl-cols-1 sm:grid-cols-2 gap-8 pt-4">
-                  <div className="aspect-video grid place-items-center bg-center bg-cover group text-white bg-discover">
+                  <div className="aspect-video grid place-items-center bg-center bg-cover group text-base-100 bg-discover">
                     <div className="group-hover:hidden text-4xl">Discover</div>
                     <div className="hidden group-hover:block justify-center m-2">Discover software relevant to your research interest</div>
                   </div>
-                  <div className="aspect-video grid place-items-center bg-center bg-cover group text-white bg-cite">
+                  <div className="aspect-video grid place-items-center bg-center bg-cover group text-base-100 bg-cite">
                     <div className="group-hover:hidden text-4xl">Cite</div>
                     <div className="hidden group-hover:block justify-center m-2">Version specific bibliography supports correct software citation</div>
                   </div>
                 </div>
               </div>
               <div className="">
                 <a onClick={handleClickOpen}>
-                  <div className="w-[250px] bg-[#05e5ba] hover:bg-primary text-secondary hover:text-white text-center font-medium text-2xl py-4 px-6 rounded-sm">
+                  <div className="w-[250px] bg-[#05e5ba] hover:bg-primary text-secondary hover:text-base-100 text-center font-medium text-2xl py-4 px-6 rounded-sm">
                     Add your software
                   </div>
                 </a>

diff --git a/frontend/components/home/rsd/OrganisationSignUp.tsx b/frontend/components/home/rsd/OrganisationSignUp.tsx
@@ -1,5 +1,5 @@
-// SPDX-FileCopyrightText: 2022 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2022 dv4all
+// SPDX-FileCopyrightText: 2022 - 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2022 - 2023 dv4all
 //
 // SPDX-License-Identifier: Apache-2.0
 
@@ -20,7 +20,7 @@ type SignUpOrganisation = {
   description: string
 }
 
-const inputClasses='mb-4 placeholder:text-gray-500 outline-0 p-2 w-full text-sm bg-transparent text-white border border-gray-600 rounded-sm'
+const inputClasses='mb-4 placeholder:text-base-500 outline-0 p-2 w-full text-sm bg-transparent text-base-100 border border-base-600 rounded-sm'
 
 export default function OrganisationSignUp({minWidth = '9rem'}:{minWidth:string}) {
   const theme = useTheme()
@@ -78,9 +78,9 @@ export default function OrganisationSignUp({minWidth = '9rem'}:{minWidth:string}
       >
         <div className="relative group">
           <div
-            className="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-300"/>
+            className="absolute -inset-1 bg-gradient-to-r from-glow-start to-glow-end rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-300"/>
           <div
-            className="flex gap-3 text-black relative px-8 py-3 bg-white ring-1 ring-gray-900/5 rounded leading-none items-center justify-center space-x-2"
+            className="flex gap-3 text-base-900 relative px-8 py-3 bg-base-100 ring-1 ring-base-800 rounded leading-none items-center justify-center space-x-2"
             style={{
               minWidth
             }}
@@ -99,7 +99,7 @@ export default function OrganisationSignUp({minWidth = '9rem'}:{minWidth:string}
       >
         <div className="h-full w-full bg-[#232323] p-6">
           <div className="mx-auto">
-            <div className="text-white text-xl mb-4">
+            <div className="text-base-100 text-xl mb-4">
               {config.button.register.label}
             </div>
             <div className="text-sm text-[#B7B7B7] pb-4">
@@ -140,15 +140,15 @@ export default function OrganisationSignUp({minWidth = '9rem'}:{minWidth:string}
             {/* NAVIGATION */}
             <div className="flex justify-end items-center gap-4 my-2">
               <button
-                className="text-sm text-white border border-gray-500 text-opacity-60 rounded px-4 py-1 hover:opacity-90 active:opacity-95"
+                className="text-sm text-base-100 border border-base-500 text-opacity-60 rounded px-4 py-1 hover:opacity-90 active:opacity-95"
                 onClick={closeAndReset}>
                 Cancel
               </button>
               <a
                 role="button"
                 type="submit"
                 onClick={closeAndReset}
-                className="text-sm text-white hover:text-white bg-primary px-4 py-1 rounded hover:opacity-90 active:opacity-95"
+                className="text-sm text-base-100 hover:text-base-100 bg-primary px-4 py-1 rounded hover:opacity-90 active:opacity-95"
                 target="_blank"
                 rel="noreferrer"
                 href={`mailto:${host.email}?subject=${encodeURIComponent(config.button.register.label)}&body=${mailBody()}`}

diff --git a/frontend/components/home/rsd/PersonalSignUp.tsx b/frontend/components/home/rsd/PersonalSignUp.tsx
@@ -1,5 +1,5 @@
-// SPDX-FileCopyrightText: 2022 Dusan Mijatovic (dv4all)
-// SPDX-FileCopyrightText: 2022 dv4all
+// SPDX-FileCopyrightText: 2022 - 2023 Dusan Mijatovic (dv4all)
+// SPDX-FileCopyrightText: 2022 - 2023 dv4all
 //
 // SPDX-License-Identifier: Apache-2.0
 
@@ -21,7 +21,7 @@ type SignUpForm = {
   description:string
 }
 
-const inputClasses='mb-4 placeholder:text-gray-500 outline-0 p-2 w-full text-sm bg-transparent text-white border border-gray-600 rounded-sm'
+const inputClasses='mb-4 placeholder:text-base-500 outline-0 p-2 w-full text-sm bg-transparent text-base-100 border border-base-600 rounded-sm'
 
 export default function PersonalSignUp({minWidth = '9rem'}:{minWidth:string}) {
   const theme = useTheme()
@@ -82,9 +82,9 @@ export default function PersonalSignUp({minWidth = '9rem'}:{minWidth:string}) {
       >
         <div className="relative group">
           <div
-            className="absolute -inset-1 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-300"/>
+            className="absolute -inset-1 bg-gradient-to-r from-glow-start to-glow-end rounded-lg blur opacity-25 group-hover:opacity-100 transition duration-1000 group-hover:duration-300"/>
           <div
-            className="flex gap-3 text-black relative px-8 py-3 bg-white ring-1 ring-gray-900/5 rounded leading-none items-center justify-center space-x-2"
+            className="flex gap-3 text-base-900 relative px-8 py-3 bg-base-100 ring-1 ring-base-800 rounded leading-none items-center justify-center space-x-2"
             style={{
               minWidth
             }}
@@ -103,7 +103,7 @@ export default function PersonalSignUp({minWidth = '9rem'}:{minWidth:string}) {
       >
         <div className="h-full w-full bg-[#232323] p-6">
           <div className="mx-auto">
-            <div className="text-white text-xl mb-4">
+            <div className="text-base-100 text-xl mb-4">
               {config.button.signUp.label}
             </div>
             <div className="text-sm text-[#B7B7B7] pb-4">
@@ -153,15 +153,15 @@ export default function PersonalSignUp({minWidth = '9rem'}:{minWidth:string}) {
             {/* NAVIGATION */}
             <div className="flex justify-end items-center gap-4 my-2">
               <button
-                className="text-sm text-white border border-gray-500 text-opacity-60 rounded px-4 py-1 hover:opacity-90 active:opacity-95"
+                className="text-sm text-base-100 border border-base-500 text-opacity-60 rounded px-4 py-1 hover:opacity-90 active:opacity-95"
                 onClick={closeAndReset}>
                 Cancel
               </button>
               <a
                 role="button"
                 type="submit"
                 onClick={closeAndReset}
-                className="text-sm text-white hover:text-white bg-primary px-4 py-1 rounded hover:opacity-90 active:opacity-95"
+                className="text-sm text-base-100 hover:text-base-100 bg-primary px-4 py-1 rounded hover:opacity-90 active:opacity-95"
                 target="_blank"
                 rel="noreferrer"
                 href={`mailto:${host.email}?subject=${encodeURIComponent(config.button.signUp.label)}&body=${mailBody()}`}