From 79bb5ff5cbcce9461cfab674f561c950c91dcbeb Mon Sep 17 00:00:00 2001 From: MatthewLoyed Date: Mon, 20 Apr 2026 10:37:54 -0500 Subject: [PATCH 1/4] Refactor syles to be more unified and less random. --- .../src/components/AddFamilyMember/styles.js | 224 ++-- client/src/components/AddToTree/styles.js | 226 ++-- client/src/components/CreateMemory/styles.js | 93 +- .../src/components/MergeSharedTree/styles.js | 45 +- client/src/components/NavBar/NavBar.css | 339 +++--- .../UserActivityDashboard/styles.js | 46 +- client/src/components/UserEvents/styles.js | 32 + client/src/index.css | 85 +- client/src/pages/Account/styles.js | 1039 +++++++++-------- client/src/pages/Chat/styles.js | 32 +- client/src/pages/CreateAccount/styles.js | 242 ++-- client/src/pages/Help/styles.js | 32 +- client/src/pages/Home/styles.js | 29 +- client/src/pages/Login/styles.js | 390 +++---- client/src/pages/Reset/styles.js | 31 +- client/src/pages/Tree/styles.js | 19 +- client/src/pages/Tree/tree.css | 50 +- client/src/pages/ViewSharedTree/styles.js | 20 +- client/src/pages/WebsiteSettings/styles.js | 106 +- 19 files changed, 1671 insertions(+), 1409 deletions(-) diff --git a/client/src/components/AddFamilyMember/styles.js b/client/src/components/AddFamilyMember/styles.js index c61ccac..4d463d2 100644 --- a/client/src/components/AddFamilyMember/styles.js +++ b/client/src/components/AddFamilyMember/styles.js @@ -1,99 +1,125 @@ -export const DefaultStyle = { - fontFamily: 'Alata', -}; - -export const FieldStyle = { - borderRadius: '5px', - border: '1px solid #000000', - marginLeft: '10px' -}; - -export const ListStyle = { - listStyleType: 'none', - fontFamily: 'Alata', - display: 'flex', - flexDirection: 'column', - textAlign: 'left', - marginRight: '15%' -}; - -export const ButtonDivStyle = { - fontFamily: 'Alata', - display: 'flex', - justifyContent: 'center', -} - -export const ButtonStyle = { - fontFamily: 'Alata', - backgroundColor: '#3a5a40', - color: 'white', - borderRadius: '20px', - border: 'none', - padding: '10px 30px', - margin: '10px', - cursor: 'pointer', -} - -export const GrayButtonStyle = { - fontFamily: 'Alata', - backgroundColor: '#D9D9D9', - color: 'black', - borderRadius: '20px', - border: 'none', - padding: '10px 20px', - margin: '10px', - cursor: 'pointer', - display: 'flex', - flexDirection: 'row', - boxShadow: 'gray 0px 10px 10px -8px', -} - -export const FormStyle = { - padding: '2vw', - paddingTop: '0px', - minWidth: '360px', -} - -export const ItemStyle = { - margin: '10px 0px' -} - -export const DateFieldStyle = { - borderRadius: '5px', - border: '1px solid #000000', - marginLeft: '10px', - width: '147px', - fontFamily: 'Alata' -}; - - -export const MainContainerStyle = { - display: 'flex', - flexDirection: 'column', - padding: '2vw', - paddingTop: '0px', - alignItems: 'center', - minWidth: '360px', - minHeight: '150px', - justifyContent: 'space-between', -} - -export const AddOptionsStyle = { - display: 'flex', - flexDirection: 'column', - alignItems: 'flex-start', - width: '90%', - padding: '10px', - fontFamily: 'Alata', - // border: '1px solid gray', - // borderRadius: '5px', - marginTop: '10px', - height: '200px', - overflow: 'auto' -} - -export const ListingStyle = { - padding: '10px', - border: '1px solid gray', - width: '90%' -} \ No newline at end of file +export const DefaultStyle = { + fontFamily: 'inherit', + color: 'var(--text-color)', +}; + +export const FieldStyle = { + borderRadius: 'var(--radius-sm)', + border: '1px solid var(--input-border)', + backgroundColor: 'var(--input-bg)', + color: 'var(--text-color)', + padding: 'var(--space-2) var(--space-3)', + marginLeft: 'var(--space-2)', + outline: 'none', + transition: 'border-color 0.2s', +}; + +export const ListStyle = { + listStyleType: 'none', + fontFamily: 'inherit', + display: 'flex', + flexDirection: 'column', + textAlign: 'left', + marginRight: '15%', + width: '100%', +}; + +export const ButtonDivStyle = { + fontFamily: 'inherit', + display: 'flex', + justifyContent: 'center', + gap: 'var(--space-3)', + marginTop: 'var(--space-4)', +} + +export const ButtonStyle = { + fontFamily: 'inherit', + backgroundColor: 'var(--kt-green-primary)', + color: 'white', + borderRadius: 'var(--radius-full)', + border: 'none', + padding: '10px 30px', + margin: 'var(--space-2)', + cursor: 'pointer', + fontWeight: '600', + transition: 'background-color 0.2s', +} + +export const GrayButtonStyle = { + fontFamily: 'inherit', + backgroundColor: 'var(--surface-alt)', + color: 'var(--text-color)', + borderRadius: 'var(--radius-full)', + border: '1px solid var(--border-color)', + padding: '10px 20px', + margin: 'var(--space-2)', + cursor: 'pointer', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + boxShadow: 'var(--shadow-sm)', + fontWeight: '500', + transition: 'all 0.2s', +} + +export const FormStyle = { + padding: 'var(--space-4)', + paddingTop: '0px', + minWidth: '360px', + width: '100%', +} + +export const ItemStyle = { + margin: 'var(--space-3) 0px', + display: 'flex', + flexDirection: 'column', + gap: 'var(--space-1)', +} + +export const DateFieldStyle = { + borderRadius: 'var(--radius-sm)', + border: '1px solid var(--input-border)', + backgroundColor: 'var(--input-bg)', + color: 'var(--text-color)', + marginLeft: 'var(--space-2)', + width: '150px', + padding: 'var(--space-1) var(--space-2)', + fontFamily: 'inherit', + outline: 'none', +}; + + +export const MainContainerStyle = { + display: 'flex', + flexDirection: 'column', + padding: 'var(--space-6)', + paddingTop: '0px', + alignItems: 'center', + minWidth: '360px', + minHeight: '150px', + justifyContent: 'space-between', + backgroundColor: 'var(--card-bg)', +} + +export const AddOptionsStyle = { + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + width: '100%', + padding: 'var(--space-3)', + fontFamily: 'inherit', + marginTop: 'var(--space-3)', + height: '250px', + overflow: 'auto', + border: '1px solid var(--border-color)', + borderRadius: 'var(--radius-md)', +} + +export const ListingStyle = { + padding: 'var(--space-3)', + border: '1px solid var(--border-color)', + width: '100%', + marginBottom: 'var(--space-2)', + borderRadius: 'var(--radius-sm)', + backgroundColor: 'var(--surface-alt)', +} \ No newline at end of file diff --git a/client/src/components/AddToTree/styles.js b/client/src/components/AddToTree/styles.js index 1fc1663..fb4fede 100644 --- a/client/src/components/AddToTree/styles.js +++ b/client/src/components/AddToTree/styles.js @@ -1,101 +1,125 @@ -export const DefaultStyle = { - fontFamily: 'Alata', -}; - -export const FieldStyle = { - borderRadius: '5px', - border: '1px solid #000000', - marginLeft: '10px' -}; - -export const ListStyle = { - listStyleType: 'none', - fontFamily: 'Alata', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - padding: '10px', - margin: '0px' -}; - -export const ButtonDivStyle = { - fontFamily: 'Alata', - display: 'flex', - justifyContent: 'center', -} - -export const ButtonStyle = { - fontFamily: 'Alata', - backgroundColor: '#3a5a40', - color: 'white', - borderRadius: '20px', - border: 'none', - padding: '10px 30px', - margin: '10px', - cursor: 'pointer', -} - -export const GrayButtonStyle = { - fontFamily: 'Alata', - backgroundColor: '#D9D9D9', - color: 'black', - borderRadius: '20px', - border: 'none', - padding: '10px 20px', - margin: '10px', - cursor: 'pointer', - display: 'flex', - flexDirection: 'row', - boxShadow: 'gray 0px 10px 10px -8px', -} - -export const FormStyle = { - padding: '2vw', - paddingTop: '0px', - minWidth: '100px', - maxWidth: '500px', -} - -export const ItemStyle = { - display: 'flex', - flexDirection: 'column', - alignItems: 'center' -} - -export const DateFieldStyle = { - borderRadius: '5px', - border: '1px solid #000000', - marginLeft: '10px', - width: '147px', - fontFamily: 'Alata' -}; - - -export const MainContainerStyle = { - display: 'flex', - flexDirection: 'column', - padding: '2vw', - paddingTop: '0px', - alignItems: 'center', - minWidth: '360px', - minHeight: '150px', - justifyContent: 'space-between', -} - -export const AddOptionsStyle = { - display: 'flex', - flexDirection: 'column', - alignItems: 'flex-start', - width: '90%', - padding: '10px', - fontFamily: 'Alata', - marginTop: '10px', - height: '20%', - overflow: 'auto' -} - -export const ListingStyle = { - padding: '10px', - border: '1px solid gray', - width: '90%' -} \ No newline at end of file +export const DefaultStyle = { + fontFamily: 'inherit', + color: 'var(--text-color)', +}; + +export const FieldStyle = { + borderRadius: 'var(--radius-sm)', + border: '1px solid var(--input-border)', + backgroundColor: 'var(--input-bg)', + color: 'var(--text-color)', + padding: 'var(--space-2) var(--space-3)', + marginLeft: 'var(--space-2)', + outline: 'none', + transition: 'border-color 0.2s', +}; + +export const ListStyle = { + listStyleType: 'none', + fontFamily: 'inherit', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + padding: 'var(--space-3)', + margin: '0px', + width: '100%', +}; + +export const ButtonDivStyle = { + fontFamily: 'inherit', + display: 'flex', + justifyContent: 'center', + gap: 'var(--space-3)', +} + +export const ButtonStyle = { + fontFamily: 'inherit', + backgroundColor: 'var(--kt-green-primary)', + color: 'white', + borderRadius: 'var(--radius-full)', + border: 'none', + padding: '10px 30px', + margin: 'var(--space-2)', + cursor: 'pointer', + fontWeight: '600', + transition: 'background-color 0.2s', +} + +export const GrayButtonStyle = { + fontFamily: 'inherit', + backgroundColor: 'var(--surface-alt)', + color: 'var(--text-color)', + borderRadius: 'var(--radius-full)', + border: '1px solid var(--border-color)', + padding: '10px 20px', + margin: 'var(--space-2)', + cursor: 'pointer', + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + boxShadow: 'var(--shadow-sm)', + fontWeight: '500', + transition: 'all 0.2s', +} + +export const FormStyle = { + padding: 'var(--space-4)', + paddingTop: '0px', + width: '100%', + maxWidth: '500px', +} + +export const ItemStyle = { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + margin: 'var(--space-3) 0', +} + +export const DateFieldStyle = { + borderRadius: 'var(--radius-sm)', + border: '1px solid var(--input-border)', + backgroundColor: 'var(--input-bg)', + color: 'var(--text-color)', + marginLeft: 'var(--space-2)', + width: '150px', + padding: 'var(--space-1) var(--space-2)', + fontFamily: 'inherit', + outline: 'none', +}; + + +export const MainContainerStyle = { + display: 'flex', + flexDirection: 'column', + padding: 'var(--space-6)', + paddingTop: '0px', + alignItems: 'center', + minWidth: '360px', + minHeight: '150px', + justifyContent: 'space-between', + backgroundColor: 'var(--card-bg)', +} + +export const AddOptionsStyle = { + display: 'flex', + flexDirection: 'column', + alignItems: 'flex-start', + width: '100%', + padding: 'var(--space-3)', + fontFamily: 'inherit', + marginTop: 'var(--space-3)', + height: '250px', + overflow: 'auto', + border: '1px solid var(--border-color)', + borderRadius: 'var(--radius-md)', +} + +export const ListingStyle = { + padding: 'var(--space-3)', + border: '1px solid var(--border-color)', + width: '100%', + marginBottom: 'var(--space-2)', + borderRadius: 'var(--radius-sm)', + backgroundColor: 'var(--surface-alt)', +} \ No newline at end of file diff --git a/client/src/components/CreateMemory/styles.js b/client/src/components/CreateMemory/styles.js index af0ff88..7df5abb 100644 --- a/client/src/components/CreateMemory/styles.js +++ b/client/src/components/CreateMemory/styles.js @@ -1,72 +1,93 @@ export const DefaultStyle = { - fontFamily: 'Alata', + fontFamily: 'inherit', + color: 'var(--text-color)', }; export const FieldStyle = { - borderRadius: '5px', - border: '1px solid #000000', - marginLeft: '10px', + borderRadius: 'var(--radius-sm)', + border: '1px solid var(--input-border)', + backgroundColor: 'var(--input-bg)', + color: 'var(--text-color)', + padding: 'var(--space-2) var(--space-3)', + marginLeft: 'var(--space-2)', width: '145px', - fontFamily: 'Alata' + fontFamily: 'inherit', + outline: 'none', + transition: 'border-color 0.2s', }; export const DateFieldStyle = { - borderRadius: '5px', - border: '1px solid #000000', - marginLeft: '10px', - width: '147px', - fontFamily: 'Alata' + borderRadius: 'var(--radius-sm)', + border: '1px solid var(--input-border)', + backgroundColor: 'var(--input-bg)', + color: 'var(--text-color)', + padding: 'var(--space-2) var(--space-3)', + marginLeft: 'var(--space-2)', + width: '150px', + fontFamily: 'inherit', + outline: 'none', }; export const ListStyle = { listStyleType: 'none', - fontFamily: 'Alata', + fontFamily: 'inherit', display: 'flex', flexDirection: 'column', alignItems: 'center', - // marginRight: '15%', - padding: '0px' + padding: '0px', + width: '100%', }; export const ButtonDivStyle = { - fontFamily: 'Alata', + fontFamily: 'inherit', display: 'flex', justifyContent: 'center', + gap: 'var(--space-3)', + marginTop: 'var(--space-4)', } export const ButtonStyle = { - fontFamily: 'Alata', - backgroundColor: '#3a5a40', + fontFamily: 'inherit', + backgroundColor: 'var(--kt-green-primary)', color: 'white', - borderRadius: '10px', + borderRadius: 'var(--radius-md)', border: 'none', padding: '10px 30px', - margin: '10px', + margin: 'var(--space-2)', cursor: 'pointer', + fontWeight: '600', + transition: 'background-color 0.2s', } export const GrayButtonStyle = { - fontFamily: 'Alata', - backgroundColor: '#D9D9D9', - color: 'black', - borderRadius: '10px', - border: 'none', + fontFamily: 'inherit', + backgroundColor: 'var(--surface-alt)', + color: 'var(--text-color)', + borderRadius: 'var(--radius-md)', + border: '1px solid var(--border-color)', padding: '10px 20px', - margin: '10px', + margin: 'var(--space-2)', cursor: 'pointer', display: 'flex', flexDirection: 'row', - boxShadow: 'gray 0px 10px 10px -8px', + alignItems: 'center', + boxShadow: 'var(--shadow-sm)', + fontWeight: '500', + transition: 'all 0.2s', } export const FormStyle = { - // padding: '2vw', + padding: 'var(--space-4)', paddingTop: '0px', minWidth: '360px', + width: '100%', } export const ItemStyle = { - margin: '10px 0px' + margin: 'var(--space-3) 0px', + display: 'flex', + flexDirection: 'column', + gap: 'var(--space-1)', } export const FileUploadDefault = { @@ -77,15 +98,21 @@ export const DateSection = { display: 'flex', flexDirection: 'column', alignItems: 'center', - width: '100%' + width: '100%', + gap: 'var(--space-2)', } export const TextAreaStyle = { - borderRadius: '5px', - border: '1px solid #000000', - // marginLeft: '10px', + borderRadius: 'var(--radius-sm)', + border: '1px solid var(--input-border)', + backgroundColor: 'var(--input-bg)', + color: 'var(--text-color)', width: '100%', - height: '100%', - fontFamily: 'Alata', + minHeight: '120px', + padding: 'var(--space-3)', + fontFamily: 'inherit', boxSizing: 'border-box', + outline: 'none', + transition: 'border-color 0.2s', + resize: 'vertical', } \ No newline at end of file diff --git a/client/src/components/MergeSharedTree/styles.js b/client/src/components/MergeSharedTree/styles.js index 29c072c..b4afffe 100644 --- a/client/src/components/MergeSharedTree/styles.js +++ b/client/src/components/MergeSharedTree/styles.js @@ -1,50 +1,59 @@ export const DefaultStyle = { - fontFamily: 'Alata', + fontFamily: 'inherit', + color: 'var(--text-color)', }; export const ButtonDivStyle = { - fontFamily: 'Alata', + fontFamily: 'inherit', display: 'flex', justifyContent: 'center', + gap: 'var(--space-3)', + marginTop: 'var(--space-4)', } export const ButtonStyle = { - fontFamily: 'Alata', - backgroundColor: '#3a5a40', + fontFamily: 'inherit', + backgroundColor: 'var(--kt-green-primary)', color: 'white', - borderRadius: '10px', + borderRadius: 'var(--radius-md)', border: 'none', padding: '10px 30px', - margin: '10px', + margin: 'var(--space-2)', cursor: 'pointer', + fontWeight: '600', + transition: 'background-color 0.2s', } export const FormStyle = { paddingTop: '0px', - height: '500px', + height: '600px', display: 'flex', flexDirection: 'column', justifyContent: 'space-between', - width: 'auto' + width: '100%', + backgroundColor: 'var(--card-bg)', } export const ItemStyle = { display: 'flex', alignItems: 'center', - margin: '10px 0', - border: '1px solid rgb(87, 87, 87)', - width: '80%', - height: '10%', - padding: '10px' + margin: 'var(--space-2) 0', + border: '1px solid var(--border-color)', + width: '100%', + padding: 'var(--space-3)', + borderRadius: 'var(--radius-sm)', + backgroundColor: 'var(--surface-alt)', + boxSizing: 'border-box', } export const CheckboxListStyle = { display: 'flex', flexDirection: 'column', alignItems: 'center', - margin: '0px 30px', - overflow: 'scroll', - height: '50%', - border: '1px solid rgb(87, 87, 87)', - borderRadius: '10px' + margin: 'var(--space-4) 0', + overflowY: 'auto', + height: '400px', + border: '1px solid var(--border-color)', + borderRadius: 'var(--radius-md)', + padding: 'var(--space-2)', } \ No newline at end of file diff --git a/client/src/components/NavBar/NavBar.css b/client/src/components/NavBar/NavBar.css index 77aa24b..c8f06cc 100644 --- a/client/src/components/NavBar/NavBar.css +++ b/client/src/components/NavBar/NavBar.css @@ -1,188 +1,151 @@ -.navbar { - height: 100%; - width: 150px; - background-color: #ccdfcd; - text-decoration: none; - /* position: fixed; */ - justify-content: center; - font-family: Alata; - position: fixed; - /* top: 0; */ - z-index: 10; - text-align: center; -} - -@media screen and (max-width: 768px) { - .navbar { - display: none; - } -} - -.nested-navbar { - height: 100%; - width: 160px; - top: 0px; - background-color: #ebffec; - position: absolute; - padding-top: 30px; - margin-left: 85px; - z-index: 100; -} - -.nav-item { - display: block; - border-radius: 4px; - padding-top: 5px; - padding-left: 10px; - padding-right: 10px; - padding-bottom: 5px; - color: black; - background-color: #ccdfcd; - text-decoration: none; - font: Alata; - font-size: 16pt; - transition: all .5s; -} - -.nav-item:hover { - background-color: #ebffec; -} - -.nav-item-active { - display: block; - border-radius: 4px; - padding-top: 5px; - padding-left: 10px; - padding-right: 10px; - padding-bottom: 5px; - background-color: #ebffec; - color: black; - text-decoration: none; - font-weight: bold; - font-size: 16pt; -} - -.nav-item-nested { - display: block; - border-radius: 4px; - padding-top: 5px; - padding-left: 10px; - padding-right: 10px; - padding-bottom: 5px; - color: black; - background-color: #ebffec; - font-weight: normal; - text-decoration: none; - font: Alata; - font-size: 16pt; -} - -.nav-item-nested:hover { - background-color: #ffffff; -} - -.nav-item-nested-active { - display: block; - border-radius: 4px; - padding-top: 5px; - padding-left: 10px; - padding-right: 10px; - padding-bottom: 5px; - background: #ffffff; - color: black; - font-weight: bold; - text-decoration: none; - font-size: 16pt; -} - -.settings-and-help { - display: flex; - margin-top: 50vh; - margin-bottom: 5vh; - gap: 26%; - align-items: center; -} - -.settings-icon { - display: flex; - background-color: #ccdfcd; - margin-left: 2%; - height: 30px; - width: 30px; - color: black; -} - -.settings-icon:hover { - color: #ebffec; -} - -.help-icon { - color: black; - background-color: #ccdfcd; - height: 35px; - width: 30px -} - -.help-icon:hover { - color: #ebffec; -} - -.divider { - border-bottom-width: flex; - border-bottom-color: #ccc; -} - -/* Dark Mode Styles */ -.dark-mode .navbar { - background-color: #2d2d2d; -} - -.dark-mode .nav-item { - background-color: #2d2d2d; - color: #e0e0e0; -} - -.dark-mode .nav-item:hover { - background-color: #3a3a3a; -} - -.dark-mode .nav-item-active { - background-color: #3a3a3a; - color: #e0e0e0; -} - -.dark-mode .nested-navbar { - background-color: #3a3a3a; -} - -.dark-mode .nav-item-nested { - background-color: #3a3a3a; - color: #e0e0e0; -} - -.dark-mode .nav-item-nested:hover { - background-color: #4a4a4a; -} - -.dark-mode .nav-item-nested-active { - background-color: #4a4a4a; - color: #e0e0e0; -} - -.dark-mode .settings-icon { - background-color: #2d2d2d; - color: #e0e0e0; -} - -.dark-mode .settings-icon:hover { - color: #4CAF50; -} - -.dark-mode .help-icon { - background-color: #2d2d2d; - color: #e0e0e0; -} - -.dark-mode .help-icon:hover { - color: #4CAF50; -} \ No newline at end of file +.navbar { + height: 100%; + width: 150px; + background-color: var(--kt-green-accent); /* Standard background color for sidebar */ + text-decoration: none; + justify-content: center; + font-family: inherit; + position: fixed; + z-index: 10; + text-align: center; + transition: background-color 0.3s ease; + border-right: 1px solid var(--border-color); +} + +@media screen and (max-width: 768px) { + .navbar { + display: none; + } +} + +.nested-navbar { + height: 100%; + width: 160px; + top: 0px; + background-color: var(--kt-green-light); + position: absolute; + padding-top: var(--space-8); + margin-left: 85px; + z-index: 100; + border-right: 1px solid var(--border-color); +} + +.nav-item { + display: block; + border-radius: var(--radius-sm); + padding: var(--space-2) var(--space-3); + color: var(--text-color); + background-color: transparent; + text-decoration: none; + font-family: inherit; + font-size: 16pt; + transition: all .3s; +} + +.nav-item:hover { + background-color: var(--kt-green-light); + color: var(--kt-green-primary); +} + +.nav-item-active { + display: block; + border-radius: var(--radius-sm); + padding: var(--space-2) var(--space-3); + background-color: var(--kt-green-light); + color: var(--kt-green-primary); + text-decoration: none; + font-weight: bold; + font-size: 16pt; +} + +.nav-item-nested { + display: block; + border-radius: var(--radius-sm); + padding: var(--space-2) var(--space-3); + color: var(--text-color); + background-color: var(--kt-green-light); + font-weight: normal; + text-decoration: none; + font-family: inherit; + font-size: 16pt; + transition: all .3s; +} + +.nav-item-nested:hover { + background-color: var(--card-bg); +} + +.nav-item-nested-active { + display: block; + border-radius: var(--radius-sm); + padding: var(--space-2) var(--space-3); + background: var(--card-bg); + color: var(--kt-green-primary); + font-weight: bold; + text-decoration: none; + font-size: 16pt; +} + +.settings-and-help { + display: flex; + margin-top: 50vh; + margin-bottom: var(--space-5); + gap: 26%; + align-items: center; + justify-content: center; +} + +.settings-icon { + display: flex; + background-color: transparent; + height: 30px; + width: 30px; + color: var(--text-color); + transition: all 0.3s; +} + +.settings-icon:hover { + color: var(--kt-green-primary); + transform: rotate(30deg); +} + +.help-icon { + color: var(--text-color); + background-color: transparent; + height: 35px; + width: 30px; + transition: all 0.3s; +} + +.help-icon:hover { + color: var(--kt-green-primary); + transform: scale(1.1); +} + +.divider { + border-bottom: 1px solid var(--border-color); +} + +/* Dark Mode Overrides (if variables aren't enough) */ +.dark-mode .navbar { + background-color: var(--card-bg); +} + +.dark-mode .nav-item:hover, +.dark-mode .nav-item-active { + background-color: var(--kt-green-primary); + color: white; +} + +.dark-mode .nested-navbar { + background-color: var(--surface-alt); +} + +.dark-mode .nav-item-nested { + background-color: var(--surface-alt); +} + +.dark-mode .nav-item-nested:hover, +.dark-mode .nav-item-nested-active { + background-color: var(--card-bg); +} \ No newline at end of file diff --git a/client/src/components/UserActivityDashboard/styles.js b/client/src/components/UserActivityDashboard/styles.js index cfc980e..f572587 100644 --- a/client/src/components/UserActivityDashboard/styles.js +++ b/client/src/components/UserActivityDashboard/styles.js @@ -1,9 +1,11 @@ export const DefaultStyle = { display: 'flex', flexDirection: 'row', - fontFamily: 'Alata', + fontFamily: 'inherit', alignItems: 'flex-start', textAlign: 'center', + backgroundColor: 'var(--bg-color)', + minHeight: '100vh', }; export const RightSide = { @@ -18,34 +20,43 @@ export const Container = { alignItems: 'center', justifyContent: 'flex-start', minWidth: '290px', - width: '100%', - borderRadius: '30px', - backgroundColor: '#faf9f6', - padding: '20px 5vw', - margin: '5% 20%', - boxShadow: 'gray 0px 10px 10px -8px', - border: '0.5px solid #000000', + width: '90%', + maxWidth: '1200px', + borderRadius: 'var(--radius-xl)', + backgroundColor: 'var(--card-bg)', + padding: 'var(--space-6) 5vw', + margin: 'var(--space-10) auto', + boxShadow: 'var(--shadow-lg)', + border: '1px solid var(--border-color)', + boxSizing: 'border-box', }; export const SearchBar = { - width: '50%', - padding: '10px', + width: '100%', + maxWidth: '500px', + padding: '10px 16px', margin: '20px 0', - border: '1px solid #ccc', - borderRadius: '5px', - fontSize: '16px' + border: '1px solid var(--input-border)', + borderRadius: 'var(--radius-md)', + fontSize: '16px', + backgroundColor: 'var(--input-bg)', + color: 'var(--text-color)', + outline: 'none', + transition: 'border-color 0.2s', }; export const Header = { - fontSize: 'xx-large', + fontSize: '32px', + fontWeight: '700', display: 'flex', + color: 'var(--text-color)', flexDirection: 'row', alignContent: 'center', justifyContent: 'center', }; export const ButtonDivStyle = { - fontFamily: 'Alata', + fontFamily: 'inherit', display: 'flex', flexDirection: 'column', alignItems: 'center', @@ -57,8 +68,9 @@ export const PlusButton = { margin: '10px', cursor: 'pointer', position: 'absolute', - right: '0px', - bottom: '60px' + right: '20px', + bottom: '60px', + filter: 'drop-shadow(var(--shadow-md))', }; export const ListStyle = { diff --git a/client/src/components/UserEvents/styles.js b/client/src/components/UserEvents/styles.js index cfef27f..d7f95bf 100644 --- a/client/src/components/UserEvents/styles.js +++ b/client/src/components/UserEvents/styles.js @@ -87,6 +87,38 @@ export const TextAreaStyle = { boxSizing: 'border-box', }; +export const EventsContainer = { + display: 'flex', + flexDirection: 'column', + gap: 'var(--space-4)', + fontFamily: 'inherit', + color: 'var(--text-color)', +}; + +export const EventCard = { + backgroundColor: 'var(--card-bg)', + borderRadius: 'var(--radius-md)', + padding: 'var(--space-4)', + border: '1px solid var(--border-color)', + boxShadow: 'var(--shadow-sm)', + fontFamily: 'inherit', +}; + +export const EventTitle = { + margin: 0, + fontSize: '18px', + fontWeight: '600', + color: 'var(--kt-green-primary)', + fontFamily: 'inherit', +}; + +export const EventMeta = { + fontSize: '14px', + color: 'var(--text-secondary)', + marginTop: 'var(--space-1)', + fontFamily: 'inherit', +}; + // --- MOVED FROM ACTIVITYDASHBOARD STYLES --- export const CardContainer = { diff --git a/client/src/index.css b/client/src/index.css index a693625..5d2a28d 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -1,24 +1,71 @@ :root { + /* Brand Colors */ + --kt-green-primary: #3a5a40; + --kt-green-dark: #344e41; + --kt-green-light: #e7f3e1; + --kt-green-accent: #a3b18a; + + /* Semantic Colors */ + --kt-success: #065f46; + --kt-danger: #b42318; + --kt-warning: #f59e0b; + --kt-info: #3b82f6; + + /* Neutrals (Light Mode) */ --bg-color: #E7F2D8; - --text-color: #000000; + --text-color: #111827; + --text-secondary: #4b5563; + --text-muted: #6b7280; --card-bg: #ffffff; - --border-color: #ddd; + --border-color: #d1d5db; --input-bg: #ffffff; - --input-border: #ccc; + --input-border: #d1d5db; + + /* Surface */ + --surface-alt: #f3f4f6; + + /* Elevation */ + --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05); + --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1); + --shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.04); + + /* Radius */ + --radius-sm: 6px; + --radius-md: 10px; + --radius-lg: 16px; + --radius-xl: 24px; + --radius-full: 9999px; + + /* Spacing Base (4px) */ + --space-1: 4px; + --space-2: 8px; + --space-3: 12px; + --space-4: 16px; + --space-5: 20px; + --space-6: 24px; + --space-8: 32px; + --space-10: 40px; } .dark-mode { + /* Neutrals (Dark Mode) */ --bg-color: #1a1a1a; - --text-color: #e0e0e0; + --text-color: #f9fafb; + --text-secondary: #d1d5db; + --text-muted: #9ca3af; --card-bg: #2d2d2d; --border-color: #444; --input-bg: #3a3a3a; --input-border: #555; + + --surface-alt: #1f2937; + + --shadow-lg: 0 10px 40px rgba(0, 0, 0, 0.4); } body { margin: 0; - font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', + font-family: 'Alata', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif; -webkit-font-smoothing: antialiased; @@ -28,6 +75,34 @@ body { transition: background-color 0.3s ease, color 0.3s ease; } +/* Base Component Classes for consistency */ +.kt-button { + font-family: inherit; + font-weight: 600; + border-radius: var(--radius-md); + border: none; + padding: var(--space-2) var(--space-4); + cursor: pointer; + transition: all 0.2s ease; +} + +.kt-button-primary { + background-color: var(--kt-green-primary); + color: #ffffff; +} + +.kt-button-primary:hover { + background-color: var(--kt-green-dark); +} + +.kt-card { + background-color: var(--card-bg); + border-radius: var(--radius-lg); + box-shadow: var(--shadow-lg); + border: 1px solid var(--border-color); + transition: background-color 0.3s ease; +} + code { font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New', monospace; diff --git a/client/src/pages/Account/styles.js b/client/src/pages/Account/styles.js index 73981d4..5ce4eb4 100644 --- a/client/src/pages/Account/styles.js +++ b/client/src/pages/Account/styles.js @@ -1,512 +1,527 @@ -export const DefaultStyle = { - display: 'flex', - flexDirection: 'column', - fontFamily: 'Alata', - backgroundColor: '#E7F2D8', - minHeight: '100vh' -}; - -export const RightSide = { - display: 'flex', - justifyContent: 'center', - padding: '40px 0 64px 0' -}; - -export const ContainerStyle = { - display: 'flex', - flexDirection: 'column', - alignItems: 'stretch', - justifyContent: 'flex-start', - width: '92%', - maxWidth: '980px', - gap: '28px' -}; - -export const HeaderStyle = { - fontFamily: 'Aboreto', - margin: '0px', - fontSize: '32px', - color: '#1f2933' -}; - -export const HeadingContentStyle = { - display: 'flex', - flexDirection: 'column', - width: '100%', - gap: '20px', - padding: '0 24px' -}; - -export const HeaderDivider = { - width: '100%', - border: '0', - borderTop: '1px solid #d1d5db', - margin: '0' -}; - -export const PageHeader = { - display: 'flex', - width: '100%', - justifyContent: 'space-between', - alignItems: 'flex-start', - gap: '24px' -}; - -export const PageHeaderCopy = { - display: 'flex', - flexDirection: 'column', - gap: '6px' -}; - -export const PageTagline = { - margin: 0, - fontSize: '14px', - color: '#4b5563' -}; - -export const PageLocation = { - margin: 0, - fontSize: '14px', - color: '#6b7280' -}; - -export const GreenButtonStyle = { - fontFamily: 'Alata', - backgroundColor: '#3a5a40', - color: 'white', - borderRadius: '10px', - border: 'none', - padding: '10px 20px', - margin: '5px 0', - cursor: 'pointer', - width: 'auto', - minWidth: '140px', - height: '42px' -} - -export const DisabledGreenButtonStyle = { - fontFamily: 'Alata', - backgroundColor: 'gray', - color: 'white', - borderRadius: '10px', - border: 'none', - padding: '10px 20px', - margin: '5px 0', - cursor: 'not-allowed', - width: 'auto', - minWidth: '140px', - height: '42px' -} - -export const ButtonGroupStyle = { - display: 'flex', - flexDirection: 'row', - alignItems: 'center', - gap: '10px', - margin: '10px 0' -}; - -export const FieldStyle = { - fontFamily: 'Alata', - padding: '10px 12px', - borderRadius: '8px', - border: '1px solid #cbd5e1', - backgroundColor: '#fff', - transition: 'border-color 0.2s ease, box-shadow 0.2s ease', - outline: 'none' -} - -export const CardStyle = { - width: '100%', - backgroundColor: '#ffffff', - borderRadius: '18px', - border: '1px solid #e2e8f0', - padding: '28px 32px', - boxShadow: '0 12px 28px rgba(58, 90, 64, 0.1)', - display: 'flex', - flexDirection: 'column', - gap: '20px' -}; - -export const CardHeader = { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'flex-start', - gap: '12px' -}; - -export const CardTitle = { - margin: 0, - fontFamily: 'Alata', - fontSize: '20px', - color: '#1f2933' -}; - -export const CardSubtitle = { - margin: '4px 0 0 0', - fontSize: '14px', - color: '#6b7280', - fontFamily: 'Alata' -}; - -export const EditButton = { - fontFamily: 'Alata', - backgroundColor: '#ffffff', - color: '#3a5a40', - borderRadius: '999px', - border: '1px solid #3a5a40', - padding: '8px 16px', - cursor: 'pointer', - fontSize: '14px', - transition: 'all 0.2s ease' -}; - -export const ProfileCardBody = { - display: 'flex', - flexDirection: 'row', - gap: '24px', - flexWrap: 'wrap', - alignItems: 'center' -}; - -export const AvatarBlock = { - display: 'flex', - gap: '18px', - alignItems: 'center' -}; - -export const AvatarWrapper = { - position: 'relative', - display: 'flex', - flexDirection: 'column', - gap: '12px', - alignItems: 'center' -}; - -export const AvatarImage = { - width: '96px', - height: '96px', - borderRadius: '50%', - objectFit: 'cover', - border: '4px solid #3a5a40' -}; - -export const AvatarFallback = { - width: '96px', - height: '96px', - borderRadius: '50%', - backgroundColor: '#d1e7dd', - color: '#3a5a40', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - fontSize: '34px', - fontWeight: 600 -}; - -export const AvatarAction = { - fontFamily: 'Alata', - padding: '7px 16px', - borderRadius: '999px', - border: '1px solid #3a5a40', - backgroundColor: '#ffffff', - color: '#3a5a40', - cursor: 'pointer', - fontSize: '13px' -}; - -export const ProfileSummary = { - display: 'flex', - flexDirection: 'column', - gap: '10px', - minWidth: '220px' -}; - -export const ProfileName = { - margin: 0, - fontFamily: 'Alata', - fontSize: '26px', - color: '#1f2933' -}; - -export const ProfileMeta = { - display: 'flex', - gap: '10px', - flexWrap: 'wrap', - color: '#4b5563', - fontSize: '15px', - fontFamily: 'Alata' -}; - -export const HeaderActionGroup = { - display: 'flex', - alignItems: 'center', - gap: '10px' -}; - -export const PrimaryButton = { - fontFamily: 'Alata', - backgroundColor: '#3a5a40', - color: '#ffffff', - border: 'none', - borderRadius: '10px', - padding: '8px 18px', - cursor: 'pointer', - fontSize: '14px' -}; - -export const TertiaryButton = { - fontFamily: 'Alata', - backgroundColor: '#ffffff', - color: '#3a5a40', - border: '1px solid #cbd5e1', - borderRadius: '10px', - padding: '8px 16px', - cursor: 'pointer', - fontSize: '14px' -}; - -export const SecondaryButton = { - fontFamily: 'Alata', - backgroundColor: '#edf2ee', - color: '#27412e', - border: '1px solid #3a5a40', - borderRadius: '10px', - padding: '8px 18px', - cursor: 'pointer', - fontSize: '14px' -}; - -export const DangerButton = { - fontFamily: 'Alata', - backgroundColor: '#b42318', - color: '#ffffff', - border: 'none', - borderRadius: '10px', - padding: '10px 20px', - cursor: 'pointer', - fontSize: '14px' -}; - -export const FormGrid = { - display: 'grid', - gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', - gap: '16px' -}; - -export const FieldColumn = { - display: 'flex', - flexDirection: 'column', - gap: '6px' -}; - -export const FieldColumnFull = { - gridColumn: '1 / -1', - display: 'flex', - flexDirection: 'column', - gap: '6px' -}; - -export const FieldLabel = { - fontFamily: 'Alata', - fontSize: '13px', - color: '#4b5563' -}; - -export const ReadOnlyGrid = { - display: 'grid', - gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', - gap: '16px' -}; - -export const ReadOnlyColumn = { - display: 'flex', - flexDirection: 'column', - gap: '4px' -}; - -export const ReadOnlyColumnFull = { - gridColumn: '1 / -1', - display: 'flex', - flexDirection: 'column', - gap: '4px' -}; - -export const ReadOnlyLabel = { - fontFamily: 'Alata', - fontSize: '13px', - color: '#6b7280' -}; - -export const ReadOnlyValue = { - fontFamily: 'Alata', - fontSize: '15px', - color: '#1f2933' -}; - -export const SecurityContent = { - display: 'grid', - gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', - gap: '18px' -}; - -export const SecurityBlock = { - display: 'flex', - flexDirection: 'column', - gap: '12px', - padding: '4px 0' -}; - -export const SecurityHeadingRow = { - display: 'flex', - alignItems: 'center', - justifyContent: 'space-between', - gap: '12px' -}; - -export const SecurityTitle = { - margin: 0, - fontFamily: 'Alata', - fontSize: '18px', - color: '#1f2933' -}; - -export const HelpText = { - margin: 0, - fontSize: '13px', - color: '#4b5563', - lineHeight: 1.5 -}; - -export const StatusPillBase = { - fontFamily: 'Alata', - fontSize: '12px', - padding: '4px 10px', - borderRadius: '999px' -}; - -export const StatusPillSuccess = { - ...StatusPillBase, - backgroundColor: '#d1fae5', - color: '#065f46', - border: '1px solid #34d399' -}; - -export const StatusPillMuted = { - ...StatusPillBase, - backgroundColor: '#f1f5f9', - color: '#475569', - border: '1px solid #cbd5e1' -}; - -export const SecurityActions = { - display: 'flex', - flexWrap: 'wrap', - gap: '10px', - alignItems: 'center' -}; - -export const SecuritySteps = { - display: 'flex', - flexDirection: 'column', - gap: '12px' -}; - -export const TotpQr = { - width: '140px', - height: '140px', - borderRadius: '12px', - border: '1px solid #d1d5db', - alignSelf: 'flex-start' -}; - -export const DangerNote = { - margin: 0, - fontSize: '13px', - color: '#8a1c15', - lineHeight: 1.5 -}; - -export const ErrorBanner = { - color: '#9b1c1c', - backgroundColor: '#fde8e8', - padding: '12px', - borderRadius: '8px', - fontSize: '13px' -}; - -export const SuccessBanner = { - color: '#0f5132', - backgroundColor: '#d1e7dd', - padding: '12px', - borderRadius: '8px', - fontSize: '13px' -}; - -export const ModalOverlay = { - position: 'fixed', - top: 0, - left: 0, - right: 0, - bottom: 0, - backgroundColor: 'rgba(0, 0, 0, 0.6)', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - zIndex: 1000 -}; - -export const ModalContent = { - backgroundColor: '#ffffff', - borderRadius: '16px', - padding: '32px', - maxWidth: '500px', - width: '90%', - maxHeight: '90vh', - overflowY: 'auto', - boxShadow: '0 20px 60px rgba(0, 0, 0, 0.3)', - display: 'flex', - flexDirection: 'column', - gap: '20px' -}; - -export const ModalTitle = { - margin: 0, - fontFamily: 'Alata', - fontSize: '24px', - color: '#1f2933', - fontWeight: 'bold' -}; - -export const ModalMessage = { - margin: 0, - fontFamily: 'Alata', - fontSize: '15px', - color: '#374151', - lineHeight: 1.6 -}; - -export const ModalWarning = { - margin: 0, - fontFamily: 'Alata', - fontSize: '14px', - color: '#8a1c15', - fontWeight: '600', - marginTop: '8px' -}; - -export const ModalList = { - margin: 0, - paddingLeft: '24px', - fontFamily: 'Alata', - fontSize: '14px', - color: '#4b5563', - lineHeight: 1.8 -}; - -export const ModalActions = { - display: 'flex', - gap: '12px', - justifyContent: 'flex-end', - marginTop: '8px' -}; \ No newline at end of file +export const DefaultStyle = { + display: 'flex', + flexDirection: 'column', + fontFamily: 'inherit', + backgroundColor: 'var(--bg-color)', + minHeight: '100vh' +}; + +export const RightSide = { + display: 'flex', + justifyContent: 'center', + padding: 'var(--space-10) 0 var(--space-8) 0' +}; + +export const ContainerStyle = { + display: 'flex', + flexDirection: 'column', + alignItems: 'stretch', + justifyContent: 'flex-start', + width: '92%', + maxWidth: '980px', + gap: 'var(--space-6)' +}; + +export const HeaderStyle = { + fontFamily: '"Aboreto", sans-serif', + margin: '0px', + fontSize: '32px', + color: 'var(--text-color)' +}; + +export const HeadingContentStyle = { + display: 'flex', + flexDirection: 'column', + width: '100%', + gap: 'var(--space-5)', + padding: '0 var(--space-6)' +}; + +export const HeaderDivider = { + width: '100%', + border: '0', + borderTop: '1px solid var(--border-color)', + margin: '0' +}; + +export const PageHeader = { + display: 'flex', + width: '100%', + justifyContent: 'space-between', + alignItems: 'flex-start', + gap: 'var(--space-6)' +}; + +export const PageHeaderCopy = { + display: 'flex', + flexDirection: 'column', + gap: 'var(--space-1)' +}; + +export const PageTagline = { + margin: 0, + fontSize: '14px', + color: 'var(--text-secondary)' +}; + +export const PageLocation = { + margin: 0, + fontSize: '14px', + color: 'var(--text-muted)' +}; + +export const GreenButtonStyle = { + fontFamily: 'inherit', + backgroundColor: 'var(--kt-green-primary)', + color: 'white', + borderRadius: 'var(--radius-md)', + border: 'none', + padding: '10px 20px', + margin: '5px 0', + cursor: 'pointer', + width: 'auto', + minWidth: '140px', + height: '42px', + fontWeight: '600', + transition: 'background-color 0.2s' +} + +export const DisabledGreenButtonStyle = { + ...GreenButtonStyle, + backgroundColor: 'var(--text-muted)', + cursor: 'not-allowed', + opacity: 0.6 +} + +export const ButtonGroupStyle = { + display: 'flex', + flexDirection: 'row', + alignItems: 'center', + gap: 'var(--space-2)', + margin: 'var(--space-2) 0' +}; + +export const FieldStyle = { + fontFamily: 'inherit', + padding: '10px 12px', + borderRadius: 'var(--radius-sm)', + border: '1px solid var(--input-border)', + backgroundColor: 'var(--input-bg)', + color: 'var(--text-color)', + transition: 'border-color 0.2s ease, box-shadow 0.2s ease', + outline: 'none' +} + +export const CardStyle = { + width: '100%', + backgroundColor: 'var(--card-bg)', + borderRadius: 'var(--radius-lg)', + border: '1px solid var(--border-color)', + padding: 'var(--space-6) var(--space-8)', + boxShadow: 'var(--shadow-lg)', + display: 'flex', + flexDirection: 'column', + gap: 'var(--space-5)', + boxSizing: 'border-box' +}; + +export const CardHeader = { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'flex-start', + gap: 'var(--space-3)' +}; + +export const CardTitle = { + margin: 0, + fontFamily: 'inherit', + fontSize: '20px', + color: 'var(--text-color)', + fontWeight: '600' +}; + +export const CardSubtitle = { + margin: '4px 0 0 0', + fontSize: '14px', + color: 'var(--text-muted)', + fontFamily: 'inherit' +}; + +export const EditButton = { + fontFamily: 'inherit', + backgroundColor: 'transparent', + color: 'var(--kt-green-primary)', + borderRadius: 'var(--radius-full)', + border: '1px solid var(--kt-green-primary)', + padding: '8px 16px', + cursor: 'pointer', + fontSize: '14px', + fontWeight: '600', + transition: 'all 0.2s ease' +}; + +export const ProfileCardBody = { + display: 'flex', + flexDirection: 'row', + gap: 'var(--space-6)', + flexWrap: 'wrap', + alignItems: 'center' +}; + +export const AvatarBlock = { + display: 'flex', + gap: 'var(--space-4)', + alignItems: 'center' +}; + +export const AvatarWrapper = { + position: 'relative', + display: 'flex', + flexDirection: 'column', + gap: 'var(--space-3)', + alignItems: 'center' +}; + +export const AvatarImage = { + width: '96px', + height: '96px', + borderRadius: '50%', + objectFit: 'cover', + border: '4px solid var(--kt-green-primary)' +}; + +export const AvatarFallback = { + width: '96px', + height: '96px', + borderRadius: '50%', + backgroundColor: 'var(--kt-green-light)', + color: 'var(--kt-green-primary)', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + fontSize: '34px', + fontWeight: '600' +}; + +export const AvatarAction = { + fontFamily: 'inherit', + padding: '7px 16px', + borderRadius: 'var(--radius-full)', + border: '1px solid var(--kt-green-primary)', + backgroundColor: 'var(--card-bg)', + color: 'var(--kt-green-primary)', + cursor: 'pointer', + fontSize: '13px', + fontWeight: '600' +}; + +export const ProfileSummary = { + display: 'flex', + flexDirection: 'column', + gap: 'var(--space-2)', + minWidth: '220px' +}; + +export const ProfileName = { + margin: 0, + fontFamily: 'inherit', + fontSize: '26px', + color: 'var(--text-color)', + fontWeight: '600' +}; + +export const ProfileMeta = { + display: 'flex', + gap: 'var(--space-2)', + flexWrap: 'wrap', + color: 'var(--text-secondary)', + fontSize: '15px', + fontFamily: 'inherit' +}; + +export const HeaderActionGroup = { + display: 'flex', + alignItems: 'center', + gap: 'var(--space-2)' +}; + +export const PrimaryButton = { + fontFamily: 'inherit', + backgroundColor: 'var(--kt-green-primary)', + color: '#ffffff', + border: 'none', + borderRadius: 'var(--radius-md)', + padding: '8px 18px', + cursor: 'pointer', + fontSize: '14px', + fontWeight: '600', + transition: 'background-color 0.2s' +}; + +export const TertiaryButton = { + fontFamily: 'inherit', + backgroundColor: 'transparent', + color: 'var(--text-secondary)', + border: '1px solid var(--border-color)', + borderRadius: 'var(--radius-md)', + padding: '8px 16px', + cursor: 'pointer', + fontSize: '14px', + fontWeight: '600', + transition: 'all 0.2s' +}; + +export const SecondaryButton = { + fontFamily: 'inherit', + backgroundColor: 'var(--kt-green-light)', + color: 'var(--kt-green-primary)', + border: '1px solid var(--kt-green-primary)', + borderRadius: 'var(--radius-md)', + padding: '8px 18px', + cursor: 'pointer', + fontSize: '14px', + fontWeight: '600' +}; + +export const DangerButton = { + fontFamily: 'inherit', + backgroundColor: 'var(--kt-danger)', + color: '#ffffff', + border: 'none', + borderRadius: 'var(--radius-md)', + padding: '10px 20px', + cursor: 'pointer', + fontSize: '14px', + fontWeight: '600' +}; + +export const FormGrid = { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fit, minmax(280px, 1fr))', + gap: 'var(--space-4)' +}; + +export const FieldColumn = { + display: 'flex', + flexDirection: 'column', + gap: 'var(--space-1)' +}; + +export const FieldColumnFull = { + gridColumn: '1 / -1', + display: 'flex', + flexDirection: 'column', + gap: 'var(--space-1)' +}; + +export const FieldLabel = { + fontFamily: 'inherit', + fontSize: '13px', + color: 'var(--text-secondary)', + fontWeight: '500' +}; + +export const ReadOnlyGrid = { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fit, minmax(240px, 1fr))', + gap: 'var(--space-4)' +}; + +export const ReadOnlyColumn = { + display: 'flex', + flexDirection: 'column', + gap: 'var(--space-1)' +}; + +export const ReadOnlyColumnFull = { + gridColumn: '1 / -1', + display: 'flex', + flexDirection: 'column', + gap: 'var(--space-1)' +}; + +export const ReadOnlyLabel = { + fontFamily: 'inherit', + fontSize: '13px', + color: 'var(--text-muted)' +}; + +export const ReadOnlyValue = { + fontFamily: 'inherit', + fontSize: '15px', + color: 'var(--text-color)' +}; + +export const SecurityContent = { + display: 'grid', + gridTemplateColumns: 'repeat(auto-fit, minmax(260px, 1fr))', + gap: 'var(--space-4)' +}; + +export const SecurityBlock = { + display: 'flex', + flexDirection: 'column', + gap: 'var(--space-3)', + padding: '4px 0' +}; + +export const SecurityHeadingRow = { + display: 'flex', + alignItems: 'center', + justifyContent: 'space-between', + gap: 'var(--space-3)' +}; + +export const SecurityTitle = { + margin: 0, + fontFamily: 'inherit', + fontSize: '18px', + color: 'var(--text-color)', + fontWeight: '600' +}; + +export const HelpText = { + margin: 0, + fontSize: '13px', + color: 'var(--text-secondary)', + lineHeight: 1.5 +}; + +export const StatusPillBase = { + fontFamily: 'inherit', + fontSize: '12px', + padding: '4px 10px', + borderRadius: 'var(--radius-full)', + fontWeight: '600' +}; + +export const StatusPillSuccess = { + ...StatusPillBase, + backgroundColor: 'rgba(6, 95, 70, 0.1)', + color: 'var(--kt-success)', + border: '1px solid var(--kt-success)' +}; + +export const StatusPillMuted = { + ...StatusPillBase, + backgroundColor: 'var(--surface-alt)', + color: 'var(--text-secondary)', + border: '1px solid var(--border-color)' +}; + +export const SecurityActions = { + display: 'flex', + flexWrap: 'wrap', + gap: 'var(--space-2)', + alignItems: 'center' +}; + +export const SecuritySteps = { + display: 'flex', + flexDirection: 'column', + gap: 'var(--space-3)' +}; + +export const TotpQr = { + width: '140px', + height: '140px', + borderRadius: 'var(--radius-md)', + border: '1px solid var(--border-color)', + alignSelf: 'flex-start', + backgroundColor: '#ffffff' +}; + +export const DangerNote = { + margin: 0, + fontSize: '13px', + color: 'var(--kt-danger)', + lineHeight: 1.5 +}; + +export const ErrorBanner = { + color: 'var(--kt-danger)', + backgroundColor: 'rgba(180, 35, 24, 0.1)', + padding: 'var(--space-3)', + borderRadius: 'var(--radius-md)', + fontSize: '13px', + border: '1px solid var(--kt-danger)' +}; + +export const SuccessBanner = { + color: 'var(--kt-success)', + backgroundColor: 'rgba(6, 95, 70, 0.1)', + padding: 'var(--space-3)', + borderRadius: 'var(--radius-md)', + fontSize: '13px', + border: '1px solid var(--kt-success)' +}; + +export const ModalOverlay = { + position: 'fixed', + top: 0, + left: 0, + right: 0, + bottom: 0, + backgroundColor: 'rgba(0, 0, 0, 0.6)', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + zIndex: 1000, + backdropFilter: 'blur(4px)' +}; + +export const ModalContent = { + backgroundColor: 'var(--card-bg)', + borderRadius: 'var(--radius-lg)', + padding: 'var(--space-8)', + maxWidth: '500px', + width: '90%', + maxHeight: '90vh', + overflowY: 'auto', + boxShadow: 'var(--shadow-lg)', + display: 'flex', + flexDirection: 'column', + gap: 'var(--space-5)', + border: '1px solid var(--border-color)' +}; + +export const ModalTitle = { + margin: 0, + fontFamily: 'inherit', + fontSize: '24px', + color: 'var(--text-color)', + fontWeight: '700' +}; + +export const ModalMessage = { + margin: 0, + fontFamily: 'inherit', + fontSize: '15px', + color: 'var(--text-secondary)', + lineHeight: 1.6 +}; + +export const ModalWarning = { + margin: 0, + fontFamily: 'inherit', + fontSize: '14px', + color: 'var(--kt-danger)', + fontWeight: '600', + marginTop: '8px' +}; + +export const ModalList = { + margin: 0, + paddingLeft: '24px', + fontFamily: 'inherit', + fontSize: '14px', + color: 'var(--text-secondary)', + lineHeight: 1.8 +}; + +export const ModalActions = { + display: 'flex', + gap: 'var(--space-3)', + justifyContent: 'flex-end', + marginTop: 'var(--space-2)' +}; \ No newline at end of file diff --git a/client/src/pages/Chat/styles.js b/client/src/pages/Chat/styles.js index 63f19b6..ef938df 100644 --- a/client/src/pages/Chat/styles.js +++ b/client/src/pages/Chat/styles.js @@ -1,7 +1,10 @@ export const DefaultStyle = { - fontFamily: 'Alata', + fontFamily: 'inherit', textAlign: 'center', display: 'flex', + backgroundColor: 'var(--bg-color)', + minHeight: '100vh', + color: 'var(--text-color)', } export const ContainerStyle = { @@ -9,35 +12,44 @@ export const ContainerStyle = { flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', - width: '70%', + width: '100%', + maxWidth: '900px', height: 'auto', - backgroundColor: '#f9f9f9', - borderRadius: '10px', - boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)', - padding: '2%' + backgroundColor: 'var(--card-bg)', + borderRadius: 'var(--radius-lg)', + boxShadow: 'var(--shadow-lg)', + padding: 'var(--space-6)', + border: '1px solid var(--border-color)', + boxSizing: 'border-box', } export const RightSide = { display: 'flex', - padding: '2%', + padding: 'var(--space-6)', width: '100%', justifyContent: 'center', } export const Text = { - fontFamily: 'Alata', + fontFamily: 'inherit', + color: 'var(--text-color)', } export const Question = { - fontFamily: 'Alata', + fontFamily: 'inherit', fontWeight: 'bold', + color: 'var(--kt-green-primary)', } export const Title = { - fontFamily: 'Aboreto', + fontFamily: '"Aboreto", sans-serif', + fontSize: '32px', + color: 'var(--text-color)', + margin: '0 0 var(--space-6) 0', } export const List = { listStyleType: 'none', padding: '0', + width: '100%', } \ No newline at end of file diff --git a/client/src/pages/CreateAccount/styles.js b/client/src/pages/CreateAccount/styles.js index d5f9991..c40b13e 100644 --- a/client/src/pages/CreateAccount/styles.js +++ b/client/src/pages/CreateAccount/styles.js @@ -1,112 +1,130 @@ - export const DefaultStyle = { - display: 'flex', - flexDirection: 'column', - fontFamily: 'Alata', - alignItems: 'center', - backgroundColor: '#e7f2d8', - width: '100%' - }; - - export const Container = { - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - justifyContent: 'flex-start', - minWidth: '290px', - width: '40%', - height: '80vh', - borderRadius: '30px', - backgroundColor: '#faf9f6', - padding: '20px 5vw', - marginTop: '2%', - boxShadow: 'gray 0px 10px 10px -8px', - border: '0.5px solid #000000', - }; - - export const Logo = { - width: '150px', - height: '150px' - }; - - export const ListStyle = { - listStyleType: 'none', - fontFamily: 'Alata', - display: 'flex', - flexDirection: 'column', - alignItems: 'center', - width: 'auto', - padding: '0', - }; - - export const FormStyle = { - padding: '2vw', - paddingTop: '0px', - width: '60%', - minWidth: '260px', - alignItems: 'center', - overflowY: 'scroll' - }; - - export const ItemStyle = { - margin: '10px 0px', - display: 'flex', - flexDirection: 'column', - width: '100%' - }; - - export const FieldStyle = { - borderRadius: '5px', - border: '1px solid #000000', - width: '100%', - height: '25px', - boxShadow: 'gray 0px 10px 10px -11px', - marginTop: '5px' - }; - - export const Header = { - margin: '0', - }; - - export const ButtonStyle = { - fontFamily: 'Alata', - backgroundColor: '#3a5a40', - color: 'white', - borderRadius: '10px', - border: 'none', - padding: '10px 20px', - margin: '10px', - cursor: 'pointer', - width: '60%', - height: '45px' - }; - - export const WhiteButtonStyle = { - fontFamily: 'Alata', - backgroundColor: 'white', - color: 'black', - borderRadius: '10px', - border: '1px solid #000000', - margin: '10px', - cursor: 'pointer', - width: '100%', - height: '45px', - padding: '10px 20px', - }; - - export const ButtonDivStyle = { - fontFamily: 'Alata', - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - }; - - export const TextStyle = { - margin: '0', - fontSize: '0.7em', - textAlign: 'center' - }; - - export const LinkStyle = { - color: 'black', - textDecoration: 'none' - }; \ No newline at end of file +export const DefaultStyle = { + display: 'flex', + flexDirection: 'column', + fontFamily: 'inherit', + alignItems: 'center', + backgroundColor: 'var(--bg-color)', + width: '100%', + minHeight: '100vh', +}; + +export const Container = { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'flex-start', + minWidth: '290px', + width: '100%', + maxWidth: '480px', + borderRadius: 'var(--radius-xl)', + backgroundColor: 'var(--card-bg)', + padding: 'var(--space-8) var(--space-10)', + marginTop: 'var(--space-10)', + boxShadow: 'var(--shadow-lg)', + border: '1px solid var(--border-color)', + boxSizing: 'border-box', +}; + +export const Logo = { + width: '100px', + height: 'auto', + marginBottom: 'var(--space-4)', +}; + +export const ListStyle = { + listStyleType: 'none', + fontFamily: 'inherit', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + width: '100%', + padding: '0', +}; + +export const FormStyle = { + width: '100%', + display: 'flex', + flexDirection: 'column', + alignItems: 'center', +}; + +export const ItemStyle = { + margin: 'var(--space-3) 0', + display: 'flex', + flexDirection: 'column', + width: '100%', +}; + +export const FieldStyle = { + borderRadius: 'var(--radius-sm)', + border: '1px solid var(--input-border)', + width: '100%', + height: '40px', + padding: '0 var(--space-3)', + backgroundColor: 'var(--input-bg)', + color: 'var(--text-color)', + boxShadow: 'var(--shadow-sm)', + marginTop: 'var(--space-1)', + outline: 'none', + transition: 'border-color 0.2s', +}; + +export const Header = { + margin: '0', + color: 'var(--text-color)', + fontSize: '24px', + fontWeight: '700', + marginBottom: 'var(--space-2)', +}; + +export const ButtonStyle = { + fontFamily: 'inherit', + backgroundColor: 'var(--kt-green-primary)', + color: 'white', + borderRadius: 'var(--radius-md)', + border: 'none', + padding: '12px 24px', + margin: 'var(--space-4) 0', + cursor: 'pointer', + width: '100%', + fontWeight: '600', + fontSize: '16px', + transition: 'background-color 0.2s', +}; + +export const WhiteButtonStyle = { + fontFamily: 'inherit', + backgroundColor: 'var(--card-bg)', + color: 'var(--text-color)', + borderRadius: 'var(--radius-md)', + border: '1px solid var(--border-color)', + margin: 'var(--space-2) 0', + cursor: 'pointer', + width: '100%', + padding: '12px 24px', + fontWeight: '600', + fontSize: '16px', + transition: 'all 0.2s', +}; + +export const ButtonDivStyle = { + fontFamily: 'inherit', + display: 'flex', + flexDirection: 'column', + justifyContent: 'center', + alignItems: 'center', + width: '100%', +}; + +export const TextStyle = { + margin: '0', + fontSize: '14px', + textAlign: 'center', + color: 'var(--text-secondary)', +}; + +export const LinkStyle = { + color: 'var(--kt-green-primary)', + textDecoration: 'none', + fontWeight: '600', +}; \ No newline at end of file diff --git a/client/src/pages/Help/styles.js b/client/src/pages/Help/styles.js index 8e2b3ac..bb686a1 100644 --- a/client/src/pages/Help/styles.js +++ b/client/src/pages/Help/styles.js @@ -1,7 +1,10 @@ export const DefaultStyle = { - fontFamily: 'Alata', + fontFamily: 'inherit', textAlign: 'left', display: 'flex', + backgroundColor: 'var(--bg-color)', + minHeight: '100vh', + color: 'var(--text-color)', } export const ContainerStyle = { @@ -9,35 +12,44 @@ export const ContainerStyle = { flexDirection: 'column', alignItems: 'flex-start', justifyContent: 'flex-start', - width: '70%', + width: '100%', + maxWidth: '900px', height: 'auto', - backgroundColor: '#f9f9f9', - borderRadius: '10px', - boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)', - padding: '2%' + backgroundColor: 'var(--card-bg)', + borderRadius: 'var(--radius-lg)', + boxShadow: 'var(--shadow-lg)', + padding: 'var(--space-8)', + border: '1px solid var(--border-color)', + boxSizing: 'border-box', } export const RightSide = { display: 'flex', - padding: '2%', + padding: 'var(--space-8)', width: '100%', justifyContent: 'center', } export const Text = { - fontFamily: 'Alata', + fontFamily: 'inherit', + lineHeight: '1.6', } export const Question = { - fontFamily: 'Alata', + fontFamily: 'inherit', fontWeight: 'bold', + color: 'var(--kt-green-primary)', + marginBottom: 'var(--space-2)', } export const Title = { - fontFamily: 'Aboreto', + fontFamily: '"Aboreto", sans-serif', + fontSize: '32px', + margin: '0 0 var(--space-6) 0', } export const List = { listStyleType: 'none', padding: '0', + width: '100%', } \ No newline at end of file diff --git a/client/src/pages/Home/styles.js b/client/src/pages/Home/styles.js index 335e889..290f34f 100644 --- a/client/src/pages/Home/styles.js +++ b/client/src/pages/Home/styles.js @@ -2,25 +2,32 @@ export const DefaultStyle = { display: 'flex', flexDirection: 'row', textAlign: 'center', - fontFamily: 'Alata' + fontFamily: 'inherit', + backgroundColor: 'var(--bg-color)', + minHeight: '100vh', + color: 'var(--text-color)', } export const CalendarButton = { - width: '40px', - height: '40px', - margin: '10px', + width: '44px', + height: '44px', + margin: 'var(--space-4)', cursor: 'pointer', position: 'absolute', - right: '0px', - bottom: '0px' + right: '20px', + bottom: '20px', + filter: 'drop-shadow(var(--shadow-md))', + transition: 'transform 0.2s ease', } export const PlusButton = { - width: '40px', - height: '40px', - margin: '10px', + width: '44px', + height: '44px', + margin: 'var(--space-4)', cursor: 'pointer', position: 'absolute', - right: '0px', - bottom: '60px' + right: '20px', + bottom: '80px', + filter: 'drop-shadow(var(--shadow-md))', + transition: 'transform 0.2s ease', } \ No newline at end of file diff --git a/client/src/pages/Login/styles.js b/client/src/pages/Login/styles.js index 5fbdc05..3bb7292 100644 --- a/client/src/pages/Login/styles.js +++ b/client/src/pages/Login/styles.js @@ -1,195 +1,195 @@ -export const DefaultStyle = { - display: 'flex', - justifyContent: 'center', - alignItems: 'center', - minHeight: '100vh', - backgroundColor: '#e7f3e1', - fontFamily: '"Alata", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif', -}; - -export const Container = { - display: 'flex', - flexDirection: 'column', - width: '100%', - maxWidth: '440px', - backgroundColor: '#ffffff', - padding: '40px', - borderRadius: '24px', - boxShadow: '0 8px 30px rgba(0, 0, 0, 0.04)', - boxSizing: 'border-box', -}; - -export const LogoContainer = { - display: 'flex', - justifyContent: 'center', - marginBottom: '24px', -}; - -export const Logo = { - width: '80px', - height: 'auto', - borderRadius: '16px', -}; - -export const WelcomeHeader = { - fontSize: '24px', - fontWeight: '600', - color: '#111827', - textAlign: 'center', - margin: '0 0 8px 0', - fontFamily: 'inherit', -}; - -export const Subtitle = { - fontSize: '14px', - color: '#6b7280', - textAlign: 'center', - margin: '0 0 32px 0', -}; - -export const FormStyle = { - display: 'flex', - flexDirection: 'column', - width: '100%', -}; - -export const InputGroup = { - display: 'flex', - flexDirection: 'column', - marginBottom: '20px', -}; - -export const Label = { - fontSize: '14px', - fontWeight: '500', - color: '#374151', - marginBottom: '8px', -}; - -export const InputWrapper = { - position: 'relative', - display: 'flex', - alignItems: 'center', -}; - -export const FieldStyle = { - width: '100%', - padding: '12px 16px', - fontSize: '15px', - color: '#111827', - backgroundColor: '#ffffff', - border: '1px solid #d1d5db', - borderRadius: '10px', - outline: 'none', - boxSizing: 'border-box', - transition: 'border-color 0.2s', -}; - -export const EyeButton = { - position: 'absolute', - right: '12px', - background: 'none', - border: 'none', - cursor: 'pointer', - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - color: '#9ca3af', - padding: '4px', -}; - -export const OptionsRow = { - display: 'flex', - justifyContent: 'space-between', - alignItems: 'center', - marginBottom: '24px', -}; - -export const CheckboxLabel = { - display: 'flex', - alignItems: 'center', - fontSize: '14px', - color: '#6b7280', - cursor: 'pointer', - userSelect: 'none', -}; - -export const Checkbox = { - marginRight: '8px', - width: '16px', - height: '16px', - cursor: 'pointer', - accentColor: '#1f2937', -}; - -export const ForgotPassword = { - fontSize: '14px', - fontWeight: '600', - color: '#3a5a40', - textDecoration: 'none', - cursor: 'pointer', -}; - -export const SignInButton = { - width: '100%', - padding: '12px', - backgroundColor: '#3a5a40', // kin tree dark green - color: '#ffffff', - fontSize: '16px', - fontWeight: '600', - border: 'none', - borderRadius: '10px', - cursor: 'pointer', - transition: 'background-color 0.2s', - marginBottom: '24px', -}; - -export const DividerRow = { - display: 'flex', - alignItems: 'center', - marginBottom: '24px', -}; - -export const DividerLine = { - flex: 1, - height: '1px', - backgroundColor: '#e5e7eb', -}; - -export const DividerText = { - margin: '0 16px', - fontSize: '12px', - color: '#9ca3af', -}; - -export const GoogleButton = { - display: 'flex', - alignItems: 'center', - justifyContent: 'center', - gap: '12px', - width: '100%', - padding: '12px', - backgroundColor: '#ffffff', - border: '1px solid #d1d5db', - borderRadius: '10px', - fontSize: '15px', - fontWeight: '500', - color: '#374151', - cursor: 'pointer', - transition: 'background-color 0.2s', - marginBottom: '32px', -}; - -export const RegisterRow = { - textAlign: 'center', - fontSize: '14px', - color: '#6b7280', -}; - -export const RegisterLink = { - fontWeight: '600', - color: '#3a5a40', - textDecoration: 'none', - cursor: 'pointer', - marginLeft: '4px', -}; \ No newline at end of file +export const DefaultStyle = { + display: 'flex', + justifyContent: 'center', + alignItems: 'center', + minHeight: '100vh', + backgroundColor: 'var(--bg-color)', + fontFamily: 'inherit', +}; + +export const Container = { + display: 'flex', + flexDirection: 'column', + width: '100%', + maxWidth: '440px', + backgroundColor: 'var(--card-bg)', + padding: 'var(--space-10)', + borderRadius: 'var(--radius-xl)', + boxShadow: 'var(--shadow-lg)', + boxSizing: 'border-box', +}; + +export const LogoContainer = { + display: 'flex', + justifyContent: 'center', + marginBottom: 'var(--space-6)', +}; + +export const Logo = { + width: '80px', + height: 'auto', + borderRadius: 'var(--radius-lg)', +}; + +export const WelcomeHeader = { + fontSize: '24px', + fontWeight: '600', + color: 'var(--text-color)', + textAlign: 'center', + margin: '0 0 var(--space-2) 0', + fontFamily: 'inherit', +}; + +export const Subtitle = { + fontSize: '14px', + color: 'var(--text-secondary)', + textAlign: 'center', + margin: '0 0 var(--space-8) 0', +}; + +export const FormStyle = { + display: 'flex', + flexDirection: 'column', + width: '100%', +}; + +export const InputGroup = { + display: 'flex', + flexDirection: 'column', + marginBottom: 'var(--space-5)', +}; + +export const Label = { + fontSize: '14px', + fontWeight: '500', + color: 'var(--text-secondary)', + marginBottom: 'var(--space-2)', +}; + +export const InputWrapper = { + position: 'relative', + display: 'flex', + alignItems: 'center', +}; + +export const FieldStyle = { + width: '100%', + padding: '12px 16px', + fontSize: '15px', + color: 'var(--text-color)', + backgroundColor: 'var(--input-bg)', + border: '1px solid var(--input-border)', + borderRadius: 'var(--radius-md)', + outline: 'none', + boxSizing: 'border-box', + transition: 'border-color 0.2s', +}; + +export const EyeButton = { + position: 'absolute', + right: '12px', + background: 'none', + border: 'none', + cursor: 'pointer', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + color: 'var(--text-muted)', + padding: '4px', +}; + +export const OptionsRow = { + display: 'flex', + justifyContent: 'space-between', + alignItems: 'center', + marginBottom: 'var(--space-6)', +}; + +export const CheckboxLabel = { + display: 'flex', + alignItems: 'center', + fontSize: '14px', + color: 'var(--text-secondary)', + cursor: 'pointer', + userSelect: 'none', +}; + +export const Checkbox = { + marginRight: 'var(--space-2)', + width: '16px', + height: '16px', + cursor: 'pointer', + accentColor: 'var(--kt-green-primary)', +}; + +export const ForgotPassword = { + fontSize: '14px', + fontWeight: '600', + color: 'var(--kt-green-primary)', + textDecoration: 'none', + cursor: 'pointer', +}; + +export const SignInButton = { + width: '100%', + padding: '12px', + backgroundColor: 'var(--kt-green-primary)', + color: '#ffffff', + fontSize: '16px', + fontWeight: '600', + border: 'none', + borderRadius: 'var(--radius-md)', + cursor: 'pointer', + transition: 'background-color 0.2s', + marginBottom: 'var(--space-6)', +}; + +export const DividerRow = { + display: 'flex', + alignItems: 'center', + marginBottom: 'var(--space-6)', +}; + +export const DividerLine = { + flex: 1, + height: '1px', + backgroundColor: 'var(--border-color)', +}; + +export const DividerText = { + margin: '0 var(--space-4)', + fontSize: '12px', + color: 'var(--text-muted)', +}; + +export const GoogleButton = { + display: 'flex', + alignItems: 'center', + justifyContent: 'center', + gap: '12px', + width: '100%', + padding: '12px', + backgroundColor: 'var(--card-bg)', + border: '1px solid var(--border-color)', + borderRadius: 'var(--radius-md)', + fontSize: '15px', + fontWeight: '500', + color: 'var(--text-color)', + cursor: 'pointer', + transition: 'background-color 0.2s', + marginBottom: 'var(--space-8)', +}; + +export const RegisterRow = { + textAlign: 'center', + fontSize: '14px', + color: 'var(--text-secondary)', +}; + +export const RegisterLink = { + fontWeight: '600', + color: 'var(--kt-green-primary)', + textDecoration: 'none', + cursor: 'pointer', + marginLeft: 'var(--space-1)', +}; \ No newline at end of file diff --git a/client/src/pages/Reset/styles.js b/client/src/pages/Reset/styles.js index 5e2c862..80e5cd1 100644 --- a/client/src/pages/Reset/styles.js +++ b/client/src/pages/Reset/styles.js @@ -1,7 +1,26 @@ export const DefaultStyle = { - display: 'flex', - flexDirection: 'column', - padding: '10px', - fontFamily: 'Alata', - alignItems: 'center', - } \ No newline at end of file + display: 'flex', + flexDirection: 'column', + padding: 'var(--space-6)', + fontFamily: 'inherit', + alignItems: 'center', + backgroundColor: 'var(--bg-color)', + minHeight: '100vh', + color: 'var(--text-color)', +} + +export const Container = { + display: 'flex', + flexDirection: 'column', + alignItems: 'center', + justifyContent: 'center', + minWidth: '320px', + width: '100%', + maxWidth: '400px', + borderRadius: 'var(--radius-lg)', + backgroundColor: 'var(--card-bg)', + padding: 'var(--space-8)', + marginTop: 'var(--space-10)', + boxShadow: 'var(--shadow-lg)', + border: '1px solid var(--border-color)', +}; \ No newline at end of file diff --git a/client/src/pages/Tree/styles.js b/client/src/pages/Tree/styles.js index 1d0e8ab..627fd38 100644 --- a/client/src/pages/Tree/styles.js +++ b/client/src/pages/Tree/styles.js @@ -2,7 +2,9 @@ export const DefaultStyle = { display: 'flex', flexDirection: 'row', textAlign: 'center', - fontFamily: 'Alata' + fontFamily: 'inherit', + backgroundColor: 'var(--bg-color)', + minHeight: '100vh' } export const ArrowContainerStyle = { @@ -17,7 +19,6 @@ export const ArrowContainerStyle = { export const MainContainerStyle = { width: '100%', height: '100%', - // position: 'absolute', // needed for arrows to work, temporarily removed to make header work properly to left of tree top: '0', left: '0', zIndex: '1', @@ -25,13 +26,13 @@ export const MainContainerStyle = { alignItems: 'center', justifyContent: 'flex-start', display: 'flex', - margin: '3% 14%', + margin: 'var(--space-6) 14%', } export const TopRightArrowStyle = { width: '370px', height: '370px', - margin: '20px 20px', + margin: 'var(--space-5) var(--space-5)', flex: '50%', textAlign: 'right', paddingLeft: '70%' @@ -40,7 +41,7 @@ export const TopRightArrowStyle = { export const BottomLeftArrowStyle = { width: '370px', height: '370px', - margin: '20px 20px', + margin: 'var(--space-5) var(--space-5)', flex: '50%', paddingRight: '70%' } @@ -50,7 +51,7 @@ export const HeaderStyle = { width: '20%', marginLeft: '9%', marginRight: '10%', - marginBottom: '5%', + marginBottom: 'var(--space-5)', flexDirection: 'column', alignItems: 'center', zIndex: '-1' @@ -61,6 +62,8 @@ export const FamilyTreeContainerStyle = { height: '90vh', margin: 'auto', borderStyle: 'double', - // maxWidth: '800px', - borderRadius: '30px' + borderRadius: 'var(--radius-xl)', + backgroundColor: 'var(--card-bg)', + boxShadow: 'var(--shadow-lg)', + borderColor: 'var(--border-color)' } \ No newline at end of file diff --git a/client/src/pages/Tree/tree.css b/client/src/pages/Tree/tree.css index c7e70a7..f7a2619 100644 --- a/client/src/pages/Tree/tree.css +++ b/client/src/pages/Tree/tree.css @@ -7,7 +7,7 @@ --background-color: none; position: relative; display: flex; - font-family: 'Alata'; + font-family: inherit; } .f3 * { box-sizing: border-box; @@ -16,16 +16,16 @@ width:100%; height:90vh; max-height:90vh; - color:#fff + color: var(--text-color); } .f3 { --female-color: rgb(196, 138, 146); --male-color: rgb(120, 159, 172); - --genderless-color: lightgray; - --background-color: rgb(33, 33, 33); - --text-color: #0e0e0e; + --genderless-color: #cbd5e1; + --background-color: var(--card-bg); + --text-color: var(--text-color); - font-family: 'Alata', sans-serif; + font-family: inherit; } .f3 .cursor-pointer { @@ -36,7 +36,7 @@ height: 100%; } .f3 svg.main_svg text { - fill: var(--background-color); + fill: var(--text-color); } /* card-html */ @@ -53,7 +53,7 @@ } .f3 div.card .mini-tree line { stroke-width: 2px; - stroke: var(--background-color); + stroke: var(--text-color); stroke-linecap: round; } @@ -65,7 +65,7 @@ } .f3 div.card-image-circle { border-radius: 50%; - padding: 5px; + padding: var(--space-1); width: 90px; height: 90px; } @@ -79,11 +79,13 @@ min-height: 22px; text-align: center; background-color: var(--genderless-color); + color: #333; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; - border-radius: 3px; - padding: 0 5px; + border-radius: var(--radius-sm); + padding: 0 var(--space-1); + font-weight: 600; } .f3 div.card-image-circle img { @@ -96,24 +98,25 @@ .f3 div.card-image-circle svg { width: 100%; height: 100%; - padding: 5px; + padding: var(--space-1); border-radius: 50%; object-fit: cover; } .f3 div.card:hover > div { - transform: translate(0, -2px); + transform: translate(0, -4px); + transition: transform 0.2s ease; } .f3 div.card-main .card-inner, .f3 div.card:hover .card-inner { - box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.8); + box-shadow: var(--shadow-lg); } .f3 div.card-main .card-inner { - outline: 4px solid rgba(220, 220, 220, 1); + outline: 4px solid var(--kt-green-primary); } .f3 div.card-inner.f3-path-to-main { - outline: 4px solid rgba(255, 255, 255, 1); + outline: 4px solid var(--kt-green-accent); } .f3 div.card-female .card-inner, .f3 div.card-female .person-icon svg { background-color: var(--female-color); @@ -128,12 +131,13 @@ /* branches between nodes */ .f3 .link { transition: stroke-width 0.2s ease-in-out; - stroke: #76380C; + stroke: var(--kt-green-dark); stroke-width: 4; } .f3 .link.f3-path-to-main { - stroke-width: 4px; + stroke-width: 6px; + stroke: var(--kt-green-primary); } @@ -159,9 +163,9 @@ position: absolute; top: 5px; right: 5px; - width: 20px; - height: 20px; - background-color: #ff4d4d; + width: 24px; + height: 24px; + background-color: var(--kt-danger); color: white; border-radius: 50%; display: none; /* Hidden by default */ @@ -171,7 +175,7 @@ font-weight: bold; cursor: pointer; border: 2px solid white; - box-shadow: 0 2px 4px rgba(0,0,0,0.3); + box-shadow: var(--shadow-md); z-index: 10; transition: transform 0.2s, background-color 0.2s; } @@ -198,7 +202,7 @@ } .tree-plus-button:hover path { - fill: #000; + fill: var(--text-color); transition: fill 0.3s ease; } diff --git a/client/src/pages/ViewSharedTree/styles.js b/client/src/pages/ViewSharedTree/styles.js index 6cb8013..eb9bcef 100644 --- a/client/src/pages/ViewSharedTree/styles.js +++ b/client/src/pages/ViewSharedTree/styles.js @@ -2,7 +2,9 @@ export const DefaultStyle = { display: 'flex', flexDirection: 'row', textAlign: 'center', - fontFamily: 'Alata' + fontFamily: 'inherit', + backgroundColor: 'var(--bg-color)', + minHeight: '100vh' } export const ArrowContainerStyle = { @@ -17,7 +19,6 @@ export const ArrowContainerStyle = { export const MainContainerStyle = { width: '100%', height: '100%', - // position: 'absolute', // needed for arrows to work, temporarily removed to make header work properly to left of tree top: '0', left: '0', zIndex: '1', @@ -25,13 +26,13 @@ export const MainContainerStyle = { alignItems: 'center', justifyContent: 'flex-start', display: 'flex', - margin: '3% 14%', + margin: 'var(--space-6) 14%', } export const TopRightArrowStyle = { width: '370px', height: '370px', - margin: '20px 20px', + margin: 'var(--space-5) var(--space-5)', flex: '50%', textAlign: 'right', paddingLeft: '70%' @@ -40,7 +41,7 @@ export const TopRightArrowStyle = { export const BottomLeftArrowStyle = { width: '370px', height: '370px', - margin: '20px 20px', + margin: 'var(--space-5) var(--space-5)', flex: '50%', paddingRight: '70%' } @@ -50,7 +51,7 @@ export const HeaderStyle = { width: '20%', marginLeft: '9%', marginRight: '10%', - marginBottom: '5%', + marginBottom: 'var(--space-5)', flexDirection: 'column', alignItems: 'center', zIndex: '-1' @@ -60,6 +61,9 @@ export const FamilyTreeContainerStyle = { width: '80%', height: '90vh', borderStyle: 'double', - // maxWidth: '800px', - borderRadius: '30px' + margin: 'auto', + borderRadius: 'var(--radius-xl)', + backgroundColor: 'var(--card-bg)', + boxShadow: 'var(--shadow-lg)', + borderColor: 'var(--border-color)' } \ No newline at end of file diff --git a/client/src/pages/WebsiteSettings/styles.js b/client/src/pages/WebsiteSettings/styles.js index 9dc0cff..2d9f41b 100644 --- a/client/src/pages/WebsiteSettings/styles.js +++ b/client/src/pages/WebsiteSettings/styles.js @@ -1,67 +1,78 @@ export const DefaultStyle = { - fontFamily: 'Alata', + fontFamily: 'inherit', textAlign: 'left', + backgroundColor: 'var(--bg-color)', + minHeight: '100vh', + color: 'var(--text-color)', } export const RightSide = { display: 'flex', - padding: '2%' + padding: 'var(--space-6)', + flexDirection: 'column', + width: '100%', + alignItems: 'center', } export const SettingsContainer = { - width: '60%', - margin: 'auto', - padding: '20px', - background: 'var(--card-bg, #f9f9f9)', - borderRadius: '10px', - boxShadow: '0px 4px 6px rgba(0, 0, 0, 0.1)', - fontFamily: 'Alata', - color: 'var(--text-color, #333)', - transition: 'background-color 0.3s ease, color 0.3s ease' + width: '100%', + maxWidth: '800px', + margin: '0 auto', + padding: 'var(--space-8)', + background: 'var(--card-bg)', + borderRadius: 'var(--radius-lg)', + boxShadow: 'var(--shadow-lg)', + fontFamily: 'inherit', + color: 'var(--text-color)', + transition: 'background-color 0.3s ease, color 0.3s ease', + border: '1px solid var(--border-color)', }; export const Section = { - marginBottom: '20px', - padding: '15px', - borderBottom: '1px solid var(--border-color, #ddd)', + marginBottom: 'var(--space-6)', + paddingBottom: 'var(--space-4)', + borderBottom: '1px solid var(--border-color)', }; export const Title = { textAlign: 'left', - color: 'var(--text-color, #333)', - fontFamily: 'Aboreto', - marginLeft: '10px', + color: 'var(--text-color)', + fontFamily: '"Aboreto", sans-serif', + fontSize: '28px', + margin: '0 0 var(--space-6) 0', }; export const SubTitle = { - color: 'var(--text-color, #444)', - marginBottom: '10px' + color: 'var(--text-secondary)', + marginBottom: 'var(--space-2)', + fontSize: '18px', + fontWeight: '600', }; export const Button = { - fontFamily: 'Alata', - backgroundColor: '#3a5a40', + fontFamily: 'inherit', + backgroundColor: 'var(--kt-green-primary)', color: 'white', - borderRadius: '10px', + borderRadius: 'var(--radius-md)', border: 'none', padding: '10px 20px', - margin: '10px 10px 10px 0px', + margin: 'var(--space-2) var(--space-2) var(--space-2) 0px', cursor: 'pointer', - width: '20%', - minWidth: '145px', - height: '45px' + fontWeight: '600', + transition: 'background-color 0.2s', }; export const Input = { - width: '70%', - padding: '8px', - marginTop: '5px', - marginLeft: '10px', - border: '1px solid var(--input-border, #ccc)', - borderRadius: '5px', - backgroundColor: 'var(--input-bg, #ffffff)', - color: 'var(--text-color, #000)', - transition: 'background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease' + width: '100%', + maxWidth: '400px', + padding: '10px 14px', + marginTop: 'var(--space-1)', + border: '1px solid var(--input-border)', + borderRadius: 'var(--radius-sm)', + backgroundColor: 'var(--input-bg)', + color: 'var(--text-color)', + outline: 'none', + transition: 'all 0.2s ease' }; export const ToggleSwitchContainer = { @@ -85,40 +96,29 @@ export const ToggleSwitchSlider = { left: 0, right: 0, bottom: 0, - backgroundColor: '#ccc', + backgroundColor: 'var(--border-color)', transition: '0.3s', borderRadius: '24px', - '&:before': { - position: 'absolute', - content: '""', - height: '18px', - width: '18px', - left: '3px', - bottom: '3px', - backgroundColor: 'white', - transition: '0.3s', - borderRadius: '50%' - } }; export const SignOutContainer = { display: 'flex', justifyContent: 'flex-end', - padding: '20px', - marginTop: '30px', - borderTop: '1px solid var(--border-color, #e0e0e0)' + padding: 'var(--space-6) 0', + marginTop: 'var(--space-8)', + borderTop: '1px solid var(--border-color)' }; export const SignOutButton = { - backgroundColor: '#dc3545', + backgroundColor: 'var(--kt-danger)', color: 'white', border: 'none', - borderRadius: '8px', + borderRadius: 'var(--radius-md)', padding: '12px 24px', fontSize: '16px', fontWeight: '600', cursor: 'pointer', - boxShadow: '0 2px 4px rgba(220, 53, 69, 0.2)', + boxShadow: 'var(--shadow-md)', transition: 'all 0.2s ease', minWidth: '120px' }; From f74be35f889487a09ea63627f726ba1be3589a45 Mon Sep 17 00:00:00 2001 From: MatthewLoyed Date: Mon, 20 Apr 2026 11:07:36 -0500 Subject: [PATCH 2/4] Improved ui animations, polish, and css overall. --- .../AddFamilyMember/AddFamilyMember.js | 10 +- .../src/components/AddFamilyMember/styles.js | 25 +- client/src/components/NavBar/NavBar.css | 320 +++++++++--------- client/src/components/NavBar/NavBar.js | 137 ++++---- .../UserActivityDashboard/UserActivityDash.js | 38 +-- .../UserActivityDashboard/styles.js | 60 ++-- client/src/components/UserEvents/EventCard.js | 9 +- client/src/components/UserEvents/styles.js | 85 +++-- client/src/index.css | 131 +++++-- client/src/pages/Account/styles.js | 33 +- client/src/pages/Family/styles.js | 36 +- client/src/pages/Tree/Tree.js | 57 ++-- .../Tree/ViewSharedTrees/ViewSharedTrees.js | 51 ++- .../src/pages/Tree/ViewSharedTrees/styles.js | 26 +- client/src/pages/Tree/styles.js | 75 ++-- client/src/pages/Tree/tree.css | 48 ++- client/src/pages/WebsiteSettings/toggle.css | 19 +- 17 files changed, 686 insertions(+), 474 deletions(-) diff --git a/client/src/components/AddFamilyMember/AddFamilyMember.js b/client/src/components/AddFamilyMember/AddFamilyMember.js index 15c02ee..5b7feec 100644 --- a/client/src/components/AddFamilyMember/AddFamilyMember.js +++ b/client/src/components/AddFamilyMember/AddFamilyMember.js @@ -610,7 +610,7 @@ function AddFamilyMemberPopup({ trigger, userid }) {
- } /> + + + + } /> ); diff --git a/client/src/components/UserActivityDashboard/styles.js b/client/src/components/UserActivityDashboard/styles.js index f572587..cab5f29 100644 --- a/client/src/components/UserActivityDashboard/styles.js +++ b/client/src/components/UserActivityDashboard/styles.js @@ -19,16 +19,17 @@ export const Container = { flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start', - minWidth: '290px', - width: '90%', - maxWidth: '1200px', + minWidth: '320px', + width: '95%', + maxWidth: '1000px', borderRadius: 'var(--radius-xl)', backgroundColor: 'var(--card-bg)', - padding: 'var(--space-6) 5vw', + padding: 'var(--space-10) var(--space-8)', margin: 'var(--space-10) auto', - boxShadow: 'var(--shadow-lg)', + boxShadow: 'var(--shadow-premium)', border: '1px solid var(--border-color)', boxSizing: 'border-box', + animation: 'animate-in var(--timing-smooth) forwards', }; export const SearchBar = { @@ -46,31 +47,50 @@ export const SearchBar = { }; export const Header = { - fontSize: '32px', - fontWeight: '700', + fontSize: '2.5rem', + fontWeight: '800', + color: 'var(--kt-green-primary)', + marginBottom: 'var(--space-2)', + fontFamily: 'Aboreto', +}; + +export const ActionRow = { display: 'flex', - color: 'var(--text-color)', flexDirection: 'row', - alignContent: 'center', - justifyContent: 'center', + alignItems: 'center', + gap: 'var(--space-4)', + margin: 'var(--space-4) 0', }; -export const ButtonDivStyle = { - fontFamily: 'inherit', +export const SortButton = { display: 'flex', - flexDirection: 'column', alignItems: 'center', + gap: 'var(--space-2)', + padding: 'var(--space-2) var(--space-4)', + borderRadius: 'var(--radius-md)', + border: '1px solid var(--border-color)', + backgroundColor: 'var(--card-bg)', + color: 'var(--text-secondary)', + cursor: 'pointer', + fontSize: '14px', + transition: 'all var(--timing-standard)', }; export const PlusButton = { - width: '40px', - height: '40px', - margin: '10px', + width: '60px', + height: '60px', + borderRadius: 'var(--radius-full)', + backgroundColor: 'var(--kt-green-primary)', + display: 'flex', + alignItems: 'center', + justifyContent: 'center', cursor: 'pointer', - position: 'absolute', - right: '20px', - bottom: '60px', - filter: 'drop-shadow(var(--shadow-md))', + position: 'fixed', + right: '40px', + bottom: '40px', + boxShadow: 'var(--shadow-premium)', + transition: 'all var(--timing-standard)', + zIndex: '100', }; export const ListStyle = { diff --git a/client/src/components/UserEvents/EventCard.js b/client/src/components/UserEvents/EventCard.js index 2414fa6..ae728db 100644 --- a/client/src/components/UserEvents/EventCard.js +++ b/client/src/components/UserEvents/EventCard.js @@ -37,18 +37,17 @@ export function EventCard({ event, onDeleted, onUpdated }) { )} -
+
- {/* 2. Pass onUpdated to the Edit popup */} Edit} + trigger={} /> - {/* 3. Pass onDeleted to the Delete action */}
@@ -554,16 +554,11 @@ function Tree() { {/* header content */}
{/* titles */} -
-

Your Tree

-
-

The {supabaseUser?.user_metadata?.last_name} Family

+
+

Your Tree

+

+ THE {supabaseUser?.user_metadata?.last_name || 'Family'} TREE +

{/* add family member button */}
@@ -574,9 +569,7 @@ function Tree() {
- {/* family tree container */} - {/* using a border for now to differentiate tree's viewable/draggable area, and to contain automatic scaling of the tree */}
) : ( diff --git a/client/src/pages/Tree/ViewSharedTrees/ViewSharedTrees.js b/client/src/pages/Tree/ViewSharedTrees/ViewSharedTrees.js index 5e8fafe..595a7ba 100644 --- a/client/src/pages/Tree/ViewSharedTrees/ViewSharedTrees.js +++ b/client/src/pages/Tree/ViewSharedTrees/ViewSharedTrees.js @@ -50,24 +50,47 @@ function ViewSharedTrees() {
{/* title */} -

Shared Trees

-
+

Shared Trees

+
{/* dynamic list of results */}
    - {trees?.map(tree => ( -
  • -
    -
    - {/* name */} - {userData.find(user => user.id === tree.senderID)?.username} + {trees && trees.length > 0 ? ( + trees.map(tree => ( +
  • +
    +
    + + {userData.find(user => user.id === tree.senderID)?.username || 'Someone'}'s Tree + +
    + + View Tree +
    - - View Tree - -
- - ))} + + )) + ) : ( +
+
🌳
+

No shared trees yet.

+

+ Invite family members and start building your story together! +

+
+ )}
diff --git a/client/src/pages/Tree/ViewSharedTrees/styles.js b/client/src/pages/Tree/ViewSharedTrees/styles.js index 0268c3c..3093cd6 100644 --- a/client/src/pages/Tree/ViewSharedTrees/styles.js +++ b/client/src/pages/Tree/ViewSharedTrees/styles.js @@ -12,24 +12,28 @@ export const DefaultStyle = { flexDirection: 'column', alignItems: 'center', justifyContent: 'flex-start', - width: '60%', + width: '90%', maxWidth: '600px', - height: 'auto', - borderRadius: '30px', - backgroundColor: '#faf9f6', - padding: '20px', - boxShadow: '0px 0px 10px rgba(0, 0, 0, 0.1)', - marginTop: '5vh' + borderRadius: 'var(--radius-xl)', + backgroundColor: 'var(--card-bg)', + padding: 'var(--space-10) var(--space-8)', + boxShadow: 'var(--shadow-premium)', + border: '1px solid var(--border-color)', + marginTop: '5vh', + animation: 'animate-in var(--timing-smooth) forwards' } export const ItemStyle = { - margin: '10px 0px', + margin: 'var(--space-2) 0', width: '100%', display: 'flex', - flexDirection: 'column', - border: '1px solid rgb(87, 87, 87)', - padding: '10px 20px', + flexDirection: 'row', + backgroundColor: 'var(--surface-alt)', + border: '1px solid var(--border-color)', + borderRadius: 'var(--radius-md)', + padding: 'var(--space-4) var(--space-6)', alignItems: 'center', + transition: 'all var(--timing-standard)', }; export const ListStyle = { diff --git a/client/src/pages/Tree/styles.js b/client/src/pages/Tree/styles.js index 627fd38..4352ac3 100644 --- a/client/src/pages/Tree/styles.js +++ b/client/src/pages/Tree/styles.js @@ -7,6 +7,20 @@ export const DefaultStyle = { minHeight: '100vh' } +export const ButtonStyle = { + fontFamily: 'inherit', + backgroundColor: 'var(--kt-green-primary)', + color: 'white', + borderRadius: 'var(--radius-full)', + border: 'none', + padding: '12px 30px', + margin: 'var(--space-2)', + cursor: 'pointer', + fontWeight: '600', + transition: 'all 0.2s', + boxShadow: 'var(--shadow-sm)', +} + export const ArrowContainerStyle = { display: 'flex', flexWrap: 'wrap', @@ -17,53 +31,36 @@ export const ArrowContainerStyle = { } export const MainContainerStyle = { - width: '100%', - height: '100%', - top: '0', - left: '0', - zIndex: '1', - overflow: 'hidden', - alignItems: 'center', - justifyContent: 'flex-start', - display: 'flex', - margin: 'var(--space-6) 14%', -} - -export const TopRightArrowStyle = { - width: '370px', - height: '370px', - margin: 'var(--space-5) var(--space-5)', - flex: '50%', - textAlign: 'right', - paddingLeft: '70%' -} - -export const BottomLeftArrowStyle = { - width: '370px', - height: '370px', - margin: 'var(--space-5) var(--space-5)', - flex: '50%', - paddingRight: '70%' + flex: 1, + height: '100vh', + display: 'flex', + flexDirection: 'column', + padding: 'var(--space-8)', + backgroundColor: 'var(--bg-color)', + marginLeft: '220px', // width of navbar + boxSizing: 'border-box', } export const HeaderStyle = { display: 'flex', - width: '20%', - marginLeft: '9%', - marginRight: '10%', - marginBottom: 'var(--space-5)', - flexDirection: 'column', + justifyContent: 'space-between', alignItems: 'center', - zIndex: '-1' + marginBottom: 'var(--space-6)', + width: '100%', + maxWidth: '1200px', + margin: '0 auto var(--space-6) auto', } export const FamilyTreeContainerStyle = { - width: '80%', - height: '90vh', - margin: 'auto', - borderStyle: 'double', + flex: 1, + width: '100%', + maxWidth: '1200px', + margin: '0 auto', + border: '1px solid var(--border-color)', borderRadius: 'var(--radius-xl)', backgroundColor: 'var(--card-bg)', - boxShadow: 'var(--shadow-lg)', - borderColor: 'var(--border-color)' + boxShadow: 'var(--shadow-premium)', + overflow: 'hidden', + position: 'relative', + animation: 'animate-in var(--timing-smooth) forwards' } \ No newline at end of file diff --git a/client/src/pages/Tree/tree.css b/client/src/pages/Tree/tree.css index f7a2619..37a9193 100644 --- a/client/src/pages/Tree/tree.css +++ b/client/src/pages/Tree/tree.css @@ -13,9 +13,8 @@ box-sizing: border-box; } .f3.f3-cont { - width:100%; - height:90vh; - max-height:90vh; + width: 100%; + height: 100%; color: var(--text-color); } .f3 { @@ -129,15 +128,50 @@ } /* branches between nodes */ + @keyframes draw-vine { + from { + stroke-dashoffset: 1000; + } + to { + stroke-dashoffset: 0; + } + } + .f3 .link { - transition: stroke-width 0.2s ease-in-out; - stroke: var(--kt-green-dark); - stroke-width: 4; + transition: all var(--timing-standard); + stroke: var(--kt-green-accent); + stroke-width: 3; + stroke-dasharray: 1000; + stroke-dashoffset: 1000; + animation: draw-vine 1.5s var(--timing-smooth) forwards; + stroke-linecap: round; + opacity: 0.6; } .f3 .link.f3-path-to-main { - stroke-width: 6px; + stroke-width: 5px; stroke: var(--kt-green-primary); + opacity: 1; + stroke-dasharray: none; /* No animation for main path after initial growth */ + animation: none; + stroke-dashoffset: 0; + } + + /* Node Hover Effects */ + .f3 div.card-inner { + transition: all var(--timing-standard); + border: 2px solid transparent; + } + + .f3 div.card:hover div.card-inner { + transform: translateY(-5px) scale(1.05); + box-shadow: var(--shadow-lg); + border-color: var(--kt-green-primary); + } + + .f3 div.card-main .card-inner { + border: 3px solid var(--kt-green-primary); + box-shadow: 0 0 15px var(--kt-green-subtle); } diff --git a/client/src/pages/WebsiteSettings/toggle.css b/client/src/pages/WebsiteSettings/toggle.css index fb777df..cda03ec 100644 --- a/client/src/pages/WebsiteSettings/toggle.css +++ b/client/src/pages/WebsiteSettings/toggle.css @@ -12,6 +12,8 @@ position: absolute; } + + .toggle-switch-slider { position: absolute; cursor: pointer; @@ -19,8 +21,8 @@ left: 0; right: 0; bottom: 0; - background-color: #ccc; - transition: 0.3s; + background-color: var(--border-color); + transition: var(--timing-smooth); border-radius: 24px; } @@ -32,27 +34,24 @@ left: 3px; bottom: 3px; background-color: white; - transition: 0.3s; + transition: var(--timing-smooth); border-radius: 50%; + box-shadow: 0 2px 4px rgba(0,0,0,0.2); } .toggle-switch-input:checked + .toggle-switch-slider { - background-color: #3a5a40; + background-color: var(--kt-green-primary); } .toggle-switch-input:checked + .toggle-switch-slider:before { transform: translateX(26px); } -.toggle-switch-input:focus + .toggle-switch-slider { - box-shadow: 0 0 1px #3a5a40; -} - .dark-mode .toggle-switch-slider { - background-color: #555; + background-color: var(--surface-alt); } .dark-mode .toggle-switch-input:checked + .toggle-switch-slider { - background-color: #4CAF50; + background-color: var(--kt-green-accent); } From ed6f83e75ff3453e91f361ab2ddc63c5075e8b22 Mon Sep 17 00:00:00 2001 From: Matthew Loyed Date: Sun, 26 Apr 2026 13:20:35 -0500 Subject: [PATCH 3/4] Fixed sidebar hover on share tree. --- client/src/components/NavBar/NavBar.css | 28 +++++++++++++++++++++++-- 1 file changed, 26 insertions(+), 2 deletions(-) diff --git a/client/src/components/NavBar/NavBar.css b/client/src/components/NavBar/NavBar.css index 2fb7ae5..42d44f8 100644 --- a/client/src/components/NavBar/NavBar.css +++ b/client/src/components/NavBar/NavBar.css @@ -76,11 +76,12 @@ .nav-item-container { list-style: none; + position: relative; /* Ensure the absolute positioned child is relative to this */ } .nested-navbar { position: absolute; - left: 90%; + left: 100%; /* Position it exactly at the edge of the sidebar */ top: 50%; transform: translateY(-50%); width: 200px; @@ -90,7 +91,30 @@ border: 1px solid var(--border-color); padding: var(--space-2); z-index: 1001; - animation: animate-in 0.3s ease-out; + margin-left: -10px; /* Slight overlap to prevent a gap */ + animation: nested-nav-in 0.3s cubic-bezier(0.4, 0, 0.2, 1) forwards; +} + +/* Invisible bridge to prevent mouse-out when moving toward the menu */ +.nested-navbar::before { + content: ''; + position: absolute; + left: -20px; + top: 0; + bottom: 0; + width: 20px; + background: transparent; +} + +@keyframes nested-nav-in { + from { + opacity: 0; + transform: translateY(-48%) translateX(-10px); + } + to { + opacity: 1; + transform: translateY(-50%) translateX(0); + } } .nested-inner { From 88204449846272dd2ceb5c0078da41b32508df3c Mon Sep 17 00:00:00 2001 From: MatthewLoyed Date: Sun, 3 May 2026 13:33:10 -0500 Subject: [PATCH 4/4] Update Share Tree UI. --- client/src/components/NavBar/NavBar.css | 15 +- .../UserActivityDashboard/UserActivityDash.js | 2 +- client/src/index.css | 38 ++++ client/src/pages/Tree/ShareTree/ShareTree.js | 169 ++++++++++---- client/src/pages/Tree/ShareTree/styles.js | 210 +++++++++--------- .../Tree/ViewSharedTrees/ViewSharedTrees.js | 95 ++++++-- .../pages/ViewSharedTree/ViewSharedTree.js | 18 +- client/src/pages/ViewSharedTree/styles.js | 18 +- 8 files changed, 374 insertions(+), 191 deletions(-) diff --git a/client/src/components/NavBar/NavBar.css b/client/src/components/NavBar/NavBar.css index 42d44f8..e96622d 100644 --- a/client/src/components/NavBar/NavBar.css +++ b/client/src/components/NavBar/NavBar.css @@ -59,13 +59,16 @@ font-size: 1rem; font-weight: 500; transition: all var(--timing-standard); - background-color: transparent; + background-color: rgba(255, 255, 255, 0.5); + border: 1px solid rgba(58, 90, 64, 0.05); } .nav-item:hover { - background-color: var(--kt-green-soft); + background-color: var(--kt-green-subtle); + border-color: var(--kt-green-subtle); color: var(--kt-green-primary); transform: translateX(4px); + box-shadow: var(--shadow-sm); } .nav-item-active { @@ -184,8 +187,14 @@ box-shadow: 4px 0 15px rgba(0, 0, 0, 0.4); } +.dark-mode .nav-item { + background-color: rgba(255, 255, 255, 0.03); + border-color: rgba(255, 255, 255, 0.05); +} + .dark-mode .nav-item:hover { - background-color: var(--kt-green-subtle); + background-color: rgba(58, 90, 64, 0.2); + border-color: rgba(58, 90, 64, 0.3); } .dark-mode .nav-item-active { diff --git a/client/src/components/UserActivityDashboard/UserActivityDash.js b/client/src/components/UserActivityDashboard/UserActivityDash.js index 8479525..a88add2 100644 --- a/client/src/components/UserActivityDashboard/UserActivityDash.js +++ b/client/src/components/UserActivityDashboard/UserActivityDash.js @@ -149,7 +149,6 @@ function Dashboard() { setSearchItem(e.target.value)} @@ -214,6 +213,7 @@ function Dashboard() { onMemoryCreated={handleMemoryCreated} profileID={currentUserID} /> + ); diff --git a/client/src/index.css b/client/src/index.css index ff420fa..6936d93 100644 --- a/client/src/index.css +++ b/client/src/index.css @@ -131,6 +131,44 @@ body { box-shadow: 0 4px 8px rgba(58, 90, 64, 0.3); } +.kt-button-ghost { + background-color: transparent; + color: var(--text-secondary); +} + +.kt-button-ghost:hover { + background-color: var(--kt-green-soft); + color: var(--kt-green-primary); +} + +/* Semantic Ghost Variants */ +.kt-button-ghost-success { + color: var(--kt-green-primary); +} +.kt-button-ghost-success:hover { + background-color: var(--kt-green-soft); + color: var(--kt-green-dark); +} + +.kt-button-ghost-danger { + color: var(--kt-danger); +} +.kt-button-ghost-danger:hover { + background-color: rgba(180, 35, 24, 0.05); + color: var(--kt-danger); +} + +.kt-button-danger { + background-color: transparent; + color: var(--kt-danger); +} + +.kt-button-danger:hover { + background-color: rgba(180, 35, 24, 0.05); + color: var(--kt-danger); + transform: scale(1.1); +} + .kt-card { background-color: var(--card-bg); border-radius: var(--radius-lg); diff --git a/client/src/pages/Tree/ShareTree/ShareTree.js b/client/src/pages/Tree/ShareTree/ShareTree.js index 6beeeb7..27f967b 100644 --- a/client/src/pages/Tree/ShareTree/ShareTree.js +++ b/client/src/pages/Tree/ShareTree/ShareTree.js @@ -4,12 +4,17 @@ import { useForm } from 'react-hook-form'; import { Link } from 'react-router-dom'; import { useCurrentUser } from '../../../CurrentUserProvider'; import { SERVER_URL } from '../../../config/urls'; +import Popup from 'reactjs-popup'; +import 'reactjs-popup/dist/index.css'; +import { AiOutlineCheckCircle } from 'react-icons/ai'; function ShareTree() { const [searchTerm, setSearchTerm] = useState(""); const [inviteEmail, setInviteEmail] = useState(""); const [emailError, setEmailError] = useState(""); const [memberError, setMemberError] = useState(""); + const [showSuccessModal, setShowSuccessModal] = useState(false); + const [modalMessage, setModalMessage] = useState(""); // Use refs to store fetched data (fetch once, use many times) const allMembersRef = useRef([]); @@ -61,19 +66,19 @@ function ShareTree() { .then(async (response) => { if (response.ok) { let responseData = await response.json(); - console.log(responseData); - alert(responseData.message); - window.location.href = '/'; + setModalMessage(responseData.message || "Shared tree successfully!"); + setShowSuccessModal(true); } else { let errorData = await response.json(); - console.log('Error:', errorData); - alert('Error sharing tree: ' + (errorData.error || 'Unknown error')); + setModalMessage('Error sharing tree: ' + (errorData.error || 'Unknown error')); + setShowSuccessModal(true); } }) .catch(error => { console.error('Fetch error:', error); - alert('Error sharing tree: ' + error.message); + setModalMessage('Error sharing tree: ' + error.message); + setShowSuccessModal(true); }); } @@ -175,83 +180,151 @@ function ShareTree() {
-
+
{/* title */} -

Share Tree

-
+

Share Tree

+
{/* form */}
onSubmitForm(data))} style={styles.FormStyle}>
  • -
    + setSearchTerm(e.target.value)} /> -
    - {/* search results for active family members (users) */} -
    - {searchResults?.length > 0 ? ( - searchResults.map(result => ( -
    - -
    - )) - ) : searchTerm !== "" ? ( -
    -
    • +
  • -