Merge pull request #713 from MAIF/atomicDesign

Atomic design
MAIF · Jul 9, 2024 · 39497e3 · 39497e3
2 parents 722060b + 557ee17
commit 39497e3
Show file tree

Hide file tree

Showing 113 changed files with 1,137 additions and 1,254 deletions.
diff --git a/daikoku/app/domain/tenantEntities.scala b/daikoku/app/domain/tenantEntities.scala
@@ -49,45 +49,124 @@ case class DaikokuStyle(
     js: String = "",
     css: String = "",
     colorTheme: String = s""":root {
-  --error-color: #ff6347;
-  --error-color: #ffa494;
-  --success-color: #4F8A10;
-  --success-color: #76cf18;
-
-  --link-color: #7f96af;
-  --link--hover-color: #8fa6bf;
-
-  --body-bg-color: #fff;
-  --body-text-color: #212529;
-  --navbar-bg-color: #7f96af;
-  --navbar-brand-color: #fff;
+
+  --body_bg-color: #f1f3f6;
+  --body_text-color: #8a8a8a;
+  --body_link-color:#4c4c4d;
+  --body_link-hover-color:orange;
+  
+  --level2_bg-color: #e5e7ea;
+  --level2_text-color: #4c4c4d;
+  --level2_link-color: #605c5c;
+  --level2_link-hover-color: #fff;
+  
+  --level3_bg-color : #fff;
+  --level3_text-color : #222;
+  --level3_link-color: #4c4c4d;
+  --level3_link-hover-color : #000;
+  --level3_link-hover-bg-color, grey;
+  
+  --sidebar-bg-color: #e5e7ea;
+  --sidebar-text-color: #4c4c4d;
+  --sidebar-text-hover-color:orange;
+  
   --menu-bg-color: #fff;
-  --menu-text-color: #212529;
-  --menu-text-hover-bg-color: #9bb0c5;
+  --menu-text-color: #aaa;
+  --menu-text-hover-bg-color: #444;
   --menu-text-hover-color: #fff;
-  --section-bg-color: #f8f9fa;
-  --section-text-color: #6c757d;
-  --section-bottom-color: #eee;
-  --addContent-bg-color: #e9ecef;
-  --addContent-text-color: #000;
-  --sidebar-bg-color: #f8f9fa;
+  --menu-link-color: #666;   
+
+  --card_header-bg-color : #404040;
+  --card_header-text-color: #fff;
+  --card_bg-color: #282828;
+  --card_text-color: #fff;
+  --card_link-color: #b3b3b3;
+  --card_link-hover-color : orange;
 
+  --btn-bg-color: #fff;
+  --btn-text-color: #495057;
+  --btn-border-color: #97b0c7;
+
+  --error-color:#dc3545;
+  --info-color: #17a2b8;
+  --success-color: #65B741;
+  --warning-color: #ffc107;
+  --danger-color: #dc3545;
+
+  --badge-tags-bg-color: #ffc107;
+  --badge-tags-bg-hover-color: #ffe1a7;
+  --badge-tags-text-color: #212529;
+    
+  --form-text-color: #000;
+  --form-border-color: #586069;
+  --form-bg-color: #fff;
+
+  --form-select-focused-color: lightgrey;
+  --form-select-focused-text-color: white;
+  --form-select-heading-color: yellow;
+  --form-select-hover-color: lightgrey;
+  --form-select-hover-text-color: white;
+}
+
+
+:root[data-theme="DARK"] {
+  --body_bg-color: #000;
+  --body_text-color: #b3b3b3;
+  --body_link-color:#b3b3b3;
+  --body_link-hover-color:orange;
+  
+  --level2_bg-color: #121212;
+  --level2_text-color: #b3b3b3;
+  --level2_link-color: #9f9e9e;
+  --level2_link-hover-color: #fff;
+
+  --level3_bg-color : #242424;
+  --level3_text-color : #e8e8e8;
+  --level3_link-color: #9f9e9e;
+  --level3_link-hover-color : #fff;
+  --level3_link-hover-bg-color : grey;
+  
+  --sidebar-bg-color: #121212;
+  --sidebar-text-color: #b3b3b3;
+  --sidebar-text-hover-color:orange;
+  
+  --menu-bg-color: #242424;
+  --menu-text-color: #fff;
+  --menu-text-hover-bg-color: #121212;
+  --menu-text-hover-color: #fff;
+  --menu-link-color: #b3b3b3;
+  
+  --card_header-bg-color : #404040;
+  --card_header-text-color: #fff;
+  --card_bg-color: #282828;
+  --card_text-color: #fff;
+  --card_link-color: #b3b3b3;
+  --card_link-hover-color : orange;
+  
   --btn-bg-color: #fff;
   --btn-text-color: #495057;
   --btn-border-color: #97b0c7;
 
+  --error-color:#dc3545;
+  --info-color: #17a2b8;
+  --success-color: #65B741;
+  --warning-color: #ffc107;
+  --danger-color: #dc3545;
+
   --badge-tags-bg-color: #ffc107;
-  --badge-tags-bg-color: #ffe1a7;
+  --badge-tags-bg-hover-color: #ffe1a7;
   --badge-tags-text-color: #212529;
 
-  --pagination-text-color: #586069;
-  --pagination-border-color: #586069;
+  --form-text-color: #000;
+  --form-border-color: #586069;
+  --form-bg-color: #fff;
 
-  --table-bg-color: #f8f9fa;
+  --form-select-focused-color: lightgrey;
+  --form-select-focused-text-color: white;
+  --form-select-heading-color: yellow;
+  --form-select-hover-color: lightgrey;
+  --form-select-hover-text-color: white;
 
-  --apicard-visibility-color: #586069;
-  --apicard-visibility-border-color: rgba(27,31,35,.15);
-  --modal-selection-bg-color: rgba(27,31,35,.15);
 }""",
     jsUrl: Option[String] = None,
     cssUrl: Option[String] = None,

diff --git a/daikoku/app/views/error.scala.html b/daikoku/app/views/error.scala.html
@@ -28,8 +28,8 @@
   <div id="app">
     <div class="row" style="padding-top: 60px;">
       <header>
-        <div class="navbar shadow-sm fixed-top" style="background-color: var(--navbar-bg-color, #7f96af);">
-          <div class="container-fluid d-flex justify-content-center justify-content-sm-between"><a href="/" class="navbar-brand d-flex align-items-center" style="color: var(--navbar-brand-color, #fff);"><span>大黒天</span> &nbsp; Daikoku</a></div>
+        <div class="navbar shadow-sm fixed-top" style="background-color: var(--sidebar-bg-color, #7f96af);">
+          <div class="container-fluid d-flex justify-content-center justify-content-sm-between"><a href="/" class="navbar-brand d-flex align-items-center" style="color: var(--sidebar-text-color, #fff);"><span>大黒天</span> &nbsp; Daikoku</a></div>
         </div>
       </header>
       <div class="jumbotron col-12 text-center mt-5">
@@ -47,7 +47,7 @@ <h1 class="mb-2">@error</h1>
         @if(tenant.tenantMode.toString == "Some(Maintenance)" ||
         tenant.tenantMode.toString == "Some(Construction)" ||
         path.contains("/account")) {
-            <a href=@loginLink class="mt-5 btn btn-sm btn-access-negative" style="border: 1px solid #000">
+            <a href=@loginLink class="mt-5 btn btn-sm btn-outline-primary" style="border: 1px solid #000">
               Retourner à la page d'accueil
             </a>
         }

diff --git a/daikoku/app/views/response.scala.html b/daikoku/app/views/response.scala.html
@@ -28,8 +28,8 @@
         <div id="app">
             <div class="row" style="padding-top: 60px;">
                 <header>
-                    <div class="navbar shadow-sm fixed-top" style="background-color: var(--navbar-bg-color, #7f96af);">
-                        <div class="container-fluid d-flex justify-content-center justify-content-sm-between"><a href="/" class="navbar-brand d-flex align-items-center" style="color: var(--navbar-brand-color, #fff);"><span>
+                    <div class="navbar shadow-sm fixed-top" style="background-color: var(--sidebar-bg-color, #7f96af);">
+                        <div class="container-fluid d-flex justify-content-center justify-content-sm-between"><a href="/" class="navbar-brand d-flex align-items-center" style="color: var(--sidebar-text-color, #fff);"><span>
                             大黒天</span> &nbsp; Daikoku</a></div>
                     </div>
                 </header>

diff --git a/daikoku/javascript/src/apps/DaikokuApp.tsx b/daikoku/javascript/src/apps/DaikokuApp.tsx
@@ -17,6 +17,7 @@ import {
   UnauthenticatedFooter,
   UnauthenticatedHome,
   UnauthenticatedTopBar,
+  AtomicDesign
 } from '../components/frontend';
 
 import { MessagesProvider, MyProfile, NotificationList } from '../components/backoffice';
@@ -148,6 +149,14 @@ export const DaikokuApp = () => {
                       </RouteWithTitle>
                     }
                   />
+                  <Route
+                    path="/atomicDesign"
+                    element={
+                      <RouteWithTitle title={`${tenant.title} - ${translate('Notifications')}`}>
+                        <AtomicDesign />
+                      </RouteWithTitle>
+                    }
+                  />
                   <Route
                     path="/join"
                     element={
@@ -401,7 +410,7 @@ export const DaikokuApp = () => {
               {['/settings', '/notifications', '/me', '/:teamId/settings'].map((r) => (
                 <Route key={r} path={r} element={<></>} />
               ))}
-              <Route path="/" element={<Footer isBackOffice={false} />} />
+              <Route path="*" element={<Footer isBackOffice={false} />} />
             </Routes>
           </ModalProvider>
 

diff --git a/daikoku/javascript/src/apps/DaikokuHomeApp.tsx b/daikoku/javascript/src/apps/DaikokuHomeApp.tsx
@@ -32,7 +32,7 @@ const AvatarInput = ({
           value={value}
           onChange={(e) => onChange(e.target.value)}
         />
-        <button type="button" className="btn btn-access btn-block" onClick={setGravatarLink}>
+        <button type="button" className="btn btn-outline-primary btn-block" onClick={setGravatarLink}>
           <i className="fas fa-user-circle me-1" />
           <Translation i18nkey="Set avatar from Gravatar">Set avatar from Gravatar</Translation>
         </button>

diff --git a/daikoku/javascript/src/components/adminbackoffice/audittrail/AuditTrailList.tsx b/daikoku/javascript/src/components/adminbackoffice/audittrail/AuditTrailList.tsx
@@ -60,10 +60,10 @@ export const AuditTrailList = () => {
         return (
           <button
             type="button"
-            className="btn btn-sm btn-outline-primary"
+            className="btn btn-sm btn-outline-info"
             onClick={() => alert({
               title: translate('Event.details.modal.title'),
-              message: <pre style={{ backgroundColor: '#{"var(--section-bg-color, #f8f9fa)"}', color:'#{"var(--section-text-color, #6c757d)"}', padding: 10 }}>
+              message: <pre style={{ backgroundColor: '#{"var(--level2_bg-color, #f8f9fa)"}', color:'#{"var(--level2_text-color, #6c757d)"}', padding: 10 }}>
                 {JSON.stringify(value, null, 2)}
               </pre>
             })}

diff --git a/daikoku/javascript/src/components/adminbackoffice/cms/ContentSideView.tsx b/daikoku/javascript/src/components/adminbackoffice/cms/ContentSideView.tsx
@@ -140,12 +140,12 @@ const TopActions = ({
       }}
       id="content_sideview_parent"
     >
-      <button className="btn btn-sm btn-outline-primary me-1" type="button" onClick={select}>
+      <button className="btn btn-sm btn-outline-info me-1" type="button" onClick={select}>
         <i className="fas fa-plus pe-1" />
         {translate('cms.content_side.new_action')}
       </button>
       <div className="d-flex">
-        <button className="btn btn-sm btn-outline-primary" onClick={() => navigate('revisions')}>
+        <button className="btn btn-sm btn-outline-info" onClick={() => navigate('revisions')}>
           Révisions
         </button>
         <button
@@ -192,7 +192,7 @@ const HelperView = ({
       )}
       {content.link && (
         <a
-          className="btn btn-sm btn-outline-primary my-2"
+          className="btn btn-sm btn-outline-info my-2"
           href={`https://maif.github.io/daikoku/swagger-ui/index.html${content.link}`}
           target="_blank"
           rel="noreferrer noopener"
@@ -299,7 +299,7 @@ export const ContentSideView = ({
     marginTop: editable ? '52px' : 0,
     flex: 1,
   }}>
-    <button className="btn btn-sm btn-outline-primary m-1" type="button" style={{ maxWidth: 200 }}
+    <button className="btn btn-sm btn-outline-info m-1" type="button" style={{ maxWidth: 200 }}
       onClick={() => navigate('/settings/pages', { state: { reload: true } })}>
       {translate('cms.create.back_to_pages')}
     </button>

diff --git a/daikoku/javascript/src/components/adminbackoffice/cms/Create.tsx b/daikoku/javascript/src/components/adminbackoffice/cms/Create.tsx
@@ -127,17 +127,16 @@ export const Create = (props: any) => {
     <div
       style={{
         height: '42px',
-        backgroundColor: '#fff',
         display: 'flex',
         alignItems: 'center',
-        boxShadow: selected ? '0 1px 3px rgba(25,25,25,.5)' : 'none', //@ts-ignore //FIXME
-        backgroundColor: 'var(--sidebar-bg-color, #f8f9fa)',
         zIndex: selected ? 2 : 0,
+        borderTopLeftRadius: "4px",
+        borderTopRightRadius:"4px"
       }}
       onClick={onClick}
-      className="px-3"
+      className={`px-3 level2-link__with-bg ${selected ? 'level2-link__active-bg' : ''}`}
     >
-      <button className="btn btn-sm" type="button">
+      <button className="btn btn-sm level2-link" type="button">
         {title}
       </button>
       {onClose && <i className="fas fa-times" />}
@@ -160,7 +159,7 @@ export const Create = (props: any) => {
         pages={props.pages}
         setContentType={setContentType}
         inValue={inValue.side} />}
-      <div className="p-2 d-flex flex-column" style={{ flex: 1, overflow: 'hidden' }}>
+      <div className="p-2 d-flex flex-column level2" style={{ flex: 1, overflow: 'hidden' }}>
         {editable && <div className="d-flex align-items-center mt-2">
           {[
             { title: translate('cms.create.draft'), id: 0, showPreview: () => setTab(0) },

diff --git a/daikoku/javascript/src/components/adminbackoffice/cms/Pages.tsx b/daikoku/javascript/src/components/adminbackoffice/cms/Pages.tsx
@@ -95,7 +95,7 @@ export const Pages = ({
             <Link
               to={`/settings/pages/edit/${value.id}`}
               onClick={(e) => e.stopPropagation()}>
-              <button className="btn btn-outline-primary me-1" >
+              <button className="btn btn-outline-info me-1" >
                 <i className="fas fa-pen" />
               </button>
             </Link>
@@ -106,7 +106,7 @@ export const Pages = ({
               rel="noopener noreferrer"
               onClick={(e) => e.stopPropagation()}>
               <button
-                className="btn btn-outline-primary me-1"
+                className="btn btn-outline-info me-1"
                 disabled={!value.path}
               >
                 <i className="fas fa-eye" />

diff --git a/daikoku/javascript/src/components/adminbackoffice/cms/Revisions.tsx b/daikoku/javascript/src/components/adminbackoffice/cms/Revisions.tsx
@@ -149,7 +149,7 @@ export default ({ }) => {
                     {item.value.user && (<div style={{ fontStyle: 'italic', fontWeight: 'bold' }}>
                       <span>{item.value.user.name}</span>
                     </div>)}
-                    {!isCurrentVersion && isSelected && (<button className="btn btn-sm btn-outline-primary mt-2" onClick={() => {
+                    {!isCurrentVersion && isSelected && (<button className="btn btn-sm btn-outline-info mt-2" onClick={() => {
                       confirm({ message: translate('cms.revisions.delete_sentence') })
                         .then((ok) => {
                           if (ok) {

diff --git a/daikoku/javascript/src/components/adminbackoffice/cms/Sidebar.tsx b/daikoku/javascript/src/components/adminbackoffice/cms/Sidebar.tsx
@@ -151,7 +151,7 @@ export default React.memo(React.forwardRef<SideBarRef, any>(({ setFinalValue, up
             </span>
           </div>)}
           <div className="d-flex mt-3">
-            <button className="btn btn-sm btn-outline-primary me-1" style={{ flex: 1 }} type="button" onClick={() => navigate('/settings/pages', { state: { reload: true } })}>
+            <button className="btn btn-sm btn-outline-info me-1" style={{ flex: 1 }} type="button" onClick={() => navigate('/settings/pages', { state: { reload: true } })}>
               {translate('cms.create.back_to_pages')}
             </button>
             <button className="btn btn-sm btn-outline-success" style={{ flex: 1 }} type="button" onClick={updatePage}>

diff --git a/daikoku/javascript/src/components/adminbackoffice/cms/index.tsx b/daikoku/javascript/src/components/adminbackoffice/cms/index.tsx
@@ -77,7 +77,7 @@ export const CMSOffice = () => {
         <h1 className="mb-0">Pages</h1>
         <div>
           <div className="btn-group dropstart">
-            <button type="button" className="btn btn-sm me-1 btn-access" data-bs-toggle="dropdown" aria-expanded="false">
+            <button type="button" className="btn btn-sm me-1 btn-outline-primary" data-bs-toggle="dropdown" aria-expanded="false">
               <i className="fas fa-cog"></i>
             </button>
             <ul className="dropdown-menu">

diff --git a/daikoku/javascript/src/components/adminbackoffice/importexport/ImportExport.tsx b/daikoku/javascript/src/components/adminbackoffice/importexport/ImportExport.tsx
@@ -64,7 +64,7 @@ export const ImportExport = () => {
             <a
               href={`/api/state/export?download=true&export-audit-trail=${!!exportAuditTrail}`}
               target="_blank"
-              className="btn btn-outline-primary"
+              className="btn btn-outline-info"
             >
               <i className="fas fa-download me-1" />
               <Translation i18nkey="download state">download state</Translation>
@@ -73,7 +73,7 @@ export const ImportExport = () => {
               type="button"
               style={{ marginLeft: 10 }}
               onClick={importState}
-              className="btn btn-outline-primary"
+              className="btn btn-outline-info"
             >
               <i className="fas fa-upload me-1" />
               {uploading ? translate('importing ...') : translate('import state')}
@@ -93,7 +93,7 @@ export const ImportExport = () => {
             <Translation i18nkey="Mongo migration">Mongo migration</Translation>
           </h2>
           <div className="section p-3">
-            <button type="button" onClick={migrate} className="btn btn-outline-primary">
+            <button type="button" onClick={migrate} className="btn btn-outline-info">
               <i className="fas fa-database me-1" />
               {processing
                 ? translate('migration in progress ...')