diff --git a/assets/css/components/avatar.css b/assets/css/components/avatar.css index 8772c6a8..455b343c 100644 --- a/assets/css/components/avatar.css +++ b/assets/css/components/avatar.css @@ -51,11 +51,11 @@ } .atomic-avatar--white { - @apply bg-white text-gray-700 border-gray-300 border; + @apply bg-white text-zinc-700 border-zinc-300 border; } .atomic-avatar--full_white { - @apply bg-white text-gray-700; + @apply bg-white text-zinc-700; } .atomic-avatar--info { @@ -74,20 +74,20 @@ @apply bg-danger-600 text-white; } -.atomic-avatar--gray { - @apply bg-gray-600 text-white; +.atomic-avatar--zinc { + @apply bg-zinc-600 text-white; } -.atomic-avatar--light_gray { - @apply bg-gray-400 text-white; +.atomic-avatar--light_zinc { + @apply bg-zinc-400 text-white; } .atomic-avatar--light { - @apply bg-white text-gray-900 border-gray-300 dark:bg-gray-800 dark:text-white dark:border-gray-600 border; + @apply bg-white text-zinc-900 border-zinc-300 dark:bg-zinc-800 dark:text-white dark:border-zinc-600 border; } .atomic-avatar--dark { - @apply bg-gray-950 text-white border-transparent dark:text-gray-950 dark:bg-white; + @apply bg-zinc-950 text-white border-transparent dark:text-zinc-950 dark:bg-white; } /* Avatar - With image */ diff --git a/assets/css/components/badge.css b/assets/css/components/badge.css index 4741b96b..ecbbed8a 100644 --- a/assets/css/components/badge.css +++ b/assets/css/components/badge.css @@ -95,12 +95,12 @@ .atomic-badge--danger-outline { @apply border text-danger-600 border-danger-600 dark:text-danger-400 dark:border-danger-400; } -.atomic-badge--gray-light { - @apply text-gray-800 bg-gray-100 border-gray-100 dark:bg-gray-200 dark:border-gray-200; +.atomic-badge--zinc-light { + @apply text-zinc-800 bg-zinc-100 border-zinc-100 dark:bg-zinc-200 dark:border-zinc-200; } -.atomic-badge--gray-dark { - @apply text-white bg-gray-600 border-gray-600 dark:bg-gray-700 dark:border-gray-700; +.atomic-badge--zinc-dark { + @apply text-white bg-zinc-600 border-zinc-600 dark:bg-zinc-700 dark:border-zinc-700; } -.atomic-badge--gray-outline { - @apply text-gray-600 border border-gray-600 dark:text-gray-400 dark:border-gray-400; +.atomic-badge--zinc-outline { + @apply text-zinc-600 border border-zinc-600 dark:text-zinc-400 dark:border-zinc-400; } diff --git a/assets/css/components/button.css b/assets/css/components/button.css index 73abda24..25dd6165 100644 --- a/assets/css/components/button.css +++ b/assets/css/components/button.css @@ -49,19 +49,19 @@ @apply text-white border-transparent shadow-xl bg-secondary-600 hover:bg-secondary-700 focus:bg-secondary-700 active:bg-secondary-800 focus:shadow-secondary-500/50 shadow-secondary-500/30 dark:hover:shadow-secondary-600/30 dark:focus:shadow-secondary-600/30 dark:active:shadow-secondary-700/30; } .atomic-button--white { - @apply text-gray-700 bg-white border-gray-300 hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus:border-gray-400 focus:bg-gray-100 focus:text-gray-900 active:border-gray-400 active:bg-gray-200 active:text-black dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent; + @apply text-zinc-700 bg-white border-zinc-300 hover:text-zinc-900 hover:border-zinc-400 hover:bg-zinc-50 focus:outline-none focus:border-zinc-400 focus:bg-zinc-100 focus:text-zinc-900 active:border-zinc-400 active:bg-zinc-200 active:text-black dark:bg-white dark:hover:bg-zinc-200 dark:hover:border-transparent dark:border-transparent; } .atomic-button--white-outline { - @apply text-gray-600 border-gray-400 dark:border-gray-300 dark:active:border-gray-400 dark:active:bg-transparent dark:focus:bg-transparent dark:bg-transparent dark:hover:border-gray-200 dark:hover:text-gray-200 dark:hover:bg-transparent dark:text-gray-300 hover:border-gray-600 hover:text-gray-700 active:bg-gray-100 hover:bg-gray-50 focus:bg-gray-50 focus:border-gray-500 active:border-gray-600; + @apply text-zinc-600 border-zinc-400 dark:border-zinc-300 dark:active:border-zinc-400 dark:active:bg-transparent dark:focus:bg-transparent dark:bg-transparent dark:hover:border-zinc-200 dark:hover:text-zinc-200 dark:hover:bg-transparent dark:text-zinc-300 hover:border-zinc-600 hover:text-zinc-700 active:bg-zinc-100 hover:bg-zinc-50 focus:bg-zinc-50 focus:border-zinc-500 active:border-zinc-600; } .atomic-button--white-inverted { - @apply text-gray-600 border-gray-400 dark:border-white dark:hover:border-gray-700 dark:hover:text-black dark:hover:bg-white dark:text-gray-300 hover:border-gray-600 hover:text-black active:bg-gray-700 hover:bg-white focus:border-gray-700 focus:shadow-gray-500/50; + @apply text-zinc-600 border-zinc-400 dark:border-white dark:hover:border-zinc-700 dark:hover:text-black dark:hover:bg-white dark:text-zinc-300 hover:border-zinc-600 hover:text-black active:bg-zinc-700 hover:bg-white focus:border-zinc-700 focus:shadow-zinc-500/50; } .atomic-button--white-shadow { - @apply text-gray-700 bg-white border-gray-300 shadow-xl hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus:border-gray-400 focus:bg-gray-100 focus:text-gray-900 active:border-gray-400 active:bg-gray-200 dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent active:text-black shadow-gray-500/30 dark:shadow-gray-200/30 dark:hover:shadow-gray-300/30 dark:focus:shadow-gray-300/30 dark:active:shadow-gray-400/30; + @apply text-zinc-700 bg-white border-zinc-300 shadow-xl hover:text-zinc-900 hover:border-zinc-400 hover:bg-zinc-50 focus:outline-none focus:border-zinc-400 focus:bg-zinc-100 focus:text-zinc-900 active:border-zinc-400 active:bg-zinc-200 dark:bg-white dark:hover:bg-zinc-200 dark:hover:border-transparent dark:border-transparent active:text-black shadow-zinc-500/30 dark:shadow-zinc-200/30 dark:hover:shadow-zinc-300/30 dark:focus:shadow-zinc-300/30 dark:active:shadow-zinc-400/30; } .atomic-button--pure_white { - @apply text-gray-700 bg-white border-transparent border-white hover:text-gray-900 hover:border-transparent hover:bg-gray-50 focus:outline-none focus:border-transparent focus:bg-gray-100 focus:text-gray-900 active:border-transparent active:bg-gray-200 active:text-black dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent; + @apply text-zinc-700 bg-white border-transparent border-white hover:text-zinc-900 hover:border-transparent hover:bg-zinc-50 focus:outline-none focus:border-transparent focus:bg-zinc-100 focus:text-zinc-900 active:border-transparent active:bg-zinc-200 active:text-black dark:bg-white dark:hover:bg-zinc-200 dark:hover:border-transparent dark:border-transparent; } .atomic-button--info { @apply text-white border-transparent bg-info-600 hover:bg-info-700 active:bg-info-800 focus:bg-info-700; @@ -111,41 +111,41 @@ .atomic-button--danger-shadow { @apply text-white border-transparent shadow-xl bg-danger-600 hover:bg-danger-700 focus:bg-danger-700 active:bg-danger-800 focus:shadow-danger-500/50 shadow-danger-500/30 dark:hover:shadow-danger-600/30 dark:focus:shadow-danger-600/30 dark:active:shadow-danger-700/30; } -.atomic-button--gray { - @apply text-white bg-gray-600 border-transparent active:bg-gray-800 hover:bg-gray-700 focus:bg-gray-700; +.atomic-button--zinc { + @apply text-white bg-zinc-600 border-transparent active:bg-zinc-800 hover:bg-zinc-700 focus:bg-zinc-700; } -.atomic-button--gray-outline { - @apply text-gray-600 border-gray-400 dark:border-gray-400 dark:hover:border-gray-300 dark:active:border-gray-400 dark:hover:text-gray-300 dark:hover:bg-transparent dark:text-gray-400 hover:border-gray-600 hover:text-gray-700 active:bg-gray-200 active:border-gray-700 hover:bg-gray-50 focus:border-gray-700; +.atomic-button--zinc-outline { + @apply text-zinc-600 border-zinc-400 dark:border-zinc-400 dark:hover:border-zinc-300 dark:active:border-zinc-400 dark:hover:text-zinc-300 dark:hover:bg-transparent dark:text-zinc-400 hover:border-zinc-600 hover:text-zinc-700 active:bg-zinc-200 active:border-zinc-700 hover:bg-zinc-50 focus:border-zinc-700; } -.atomic-button--gray-inverted { - @apply text-gray-600 border-gray-400 dark:border-gray-400 dark:hover:border-gray-700 dark:hover:text-white dark:hover:bg-gray-700 dark:text-gray-400 hover:border-gray-600 hover:text-white active:bg-gray-700 hover:bg-gray-600 focus:border-gray-700 focus:shadow-gray-500/50; +.atomic-button--zinc-inverted { + @apply text-zinc-600 border-zinc-400 dark:border-zinc-400 dark:hover:border-zinc-700 dark:hover:text-white dark:hover:bg-zinc-700 dark:text-zinc-400 hover:border-zinc-600 hover:text-white active:bg-zinc-700 hover:bg-zinc-600 focus:border-zinc-700 focus:shadow-zinc-500/50; } -.atomic-button--gray-shadow { - @apply text-white bg-gray-600 border-transparent shadow-xl active:bg-gray-800 hover:bg-gray-700 focus:bg-gray-700 focus:shadow-gray-500/50 shadow-gray-500/30 dark:hover:shadow-gray-600/30 dark:focus:shadow-gray-600/30 dark:active:shadow-gray-700/30; +.atomic-button--zinc-shadow { + @apply text-white bg-zinc-600 border-transparent shadow-xl active:bg-zinc-800 hover:bg-zinc-700 focus:bg-zinc-700 focus:shadow-zinc-500/50 shadow-zinc-500/30 dark:hover:shadow-zinc-600/30 dark:focus:shadow-zinc-600/30 dark:active:shadow-zinc-700/30; } .atomic-button--light { - @apply text-gray-900 bg-white border-gray-300 hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus:border-gray-400 focus:bg-gray-100 focus:text-gray-900 active:border-gray-400 active:bg-gray-200 active:text-black dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:active:border-gray-700 dark:active:bg-gray-800; + @apply text-zinc-900 bg-white border-zinc-300 hover:text-zinc-900 hover:border-zinc-400 hover:bg-zinc-50 focus:outline-none focus:border-zinc-400 focus:bg-zinc-100 focus:text-zinc-900 active:border-zinc-400 active:bg-zinc-200 active:text-black dark:bg-zinc-800 dark:text-white dark:border-zinc-600 dark:hover:bg-zinc-700 dark:hover:border-zinc-600 dark:active:border-zinc-700 dark:active:bg-zinc-800; } .atomic-button--light-outline { - @apply text-gray-900 border-gray-300 dark:hover:bg-transparent hover:border-gray-400 active:bg-gray-100 hover:bg-gray-50 focus:bg-gray-50 focus:border-gray-500 active:border-gray-600 dark:text-white dark:border-gray-600 dark:active:border-gray-600 dark:hover:border-gray-500 dark:active:bg-transparent dark:focus:bg-transparent dark:bg-transparent; + @apply text-zinc-900 border-zinc-300 dark:hover:bg-transparent hover:border-zinc-400 active:bg-zinc-100 hover:bg-zinc-50 focus:bg-zinc-50 focus:border-zinc-500 active:border-zinc-600 dark:text-white dark:border-zinc-600 dark:active:border-zinc-600 dark:hover:border-zinc-500 dark:active:bg-transparent dark:focus:bg-transparent dark:bg-transparent; } .atomic-button--light-inverted { - @apply text-gray-900 border-gray-300 hover:border-gray-600 hover:text-white active:bg-gray-700 hover:bg-gray-600 focus:border-gray-700 focus:shadow-gray-500/50 dark:hover:text-black dark:hover:bg-white dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:border-white dark:active:bg-gray-300 dark:active:border-gray-300 dark:focus:shadow-gray-600/50; + @apply text-zinc-900 border-zinc-300 hover:border-zinc-600 hover:text-white active:bg-zinc-700 hover:bg-zinc-600 focus:border-zinc-700 focus:shadow-zinc-500/50 dark:hover:text-black dark:hover:bg-white dark:bg-zinc-800 dark:text-white dark:border-zinc-600 dark:hover:border-white dark:active:bg-zinc-300 dark:active:border-zinc-300 dark:focus:shadow-zinc-600/50; } .atomic-button--light-shadow { - @apply text-gray-700 bg-white border-gray-300 shadow-xl hover:text-gray-900 hover:border-gray-400 hover:bg-gray-50 focus:outline-none focus:border-gray-400 focus:bg-gray-100 focus:text-gray-900 active:border-gray-400 active:bg-gray-200 dark:hover:border-transparent dark:border-transparent active:text-black dark:bg-gray-800 dark:text-white dark:border-gray-600 dark:hover:bg-gray-700 dark:hover:border-gray-600 dark:active:border-gray-700 dark:active:bg-gray-800 shadow-gray-500/30 dark:shadow-gray-600/30 dark:hover:shadow-gray-500/30 dark:focus:shadow-gray-500/30 dark:active:shadow-gray-600/30; + @apply text-zinc-700 bg-white border-zinc-300 shadow-xl hover:text-zinc-900 hover:border-zinc-400 hover:bg-zinc-50 focus:outline-none focus:border-zinc-400 focus:bg-zinc-100 focus:text-zinc-900 active:border-zinc-400 active:bg-zinc-200 dark:hover:border-transparent dark:border-transparent active:text-black dark:bg-zinc-800 dark:text-white dark:border-zinc-600 dark:hover:bg-zinc-700 dark:hover:border-zinc-600 dark:active:border-zinc-700 dark:active:bg-zinc-800 shadow-zinc-500/30 dark:shadow-zinc-600/30 dark:hover:shadow-zinc-500/30 dark:focus:shadow-zinc-500/30 dark:active:shadow-zinc-600/30; } .atomic-button--dark { - @apply text-white border-transparent bg-gray-950 dark:text-gray-950 dark:bg-white dark:hover:text-gray-900 dark:hover:bg-gray-100 dark:focus:outline-none dark:focus:bg-gray-200 dark:focus:text-gray-900 dark:active:bg-gray-300 dark:active:text-black hover:bg-gray-800 active:bg-gray-900; + @apply text-white border-transparent bg-zinc-950 dark:text-zinc-950 dark:bg-white dark:hover:text-zinc-900 dark:hover:bg-zinc-100 dark:focus:outline-none dark:focus:bg-zinc-200 dark:focus:text-zinc-900 dark:active:bg-zinc-300 dark:active:text-black hover:bg-zinc-800 active:bg-zinc-900; } .atomic-button--dark-outline { - @apply bg-white dark:bg-gray-950 dark:border-white text-gray-950 border-gray-950 dark:hover:bg-gray-950 dark:hover:border-gray-300 dark:active:bg-gray-950 hover:bg-gray-50 dark:focus:bg-gray-950 dark:active:border-gray-400 dark:text-white active:border-gray-600 hover:border-gray-500 active:bg-gray-100 focus:bg-transparent; + @apply bg-white dark:bg-zinc-950 dark:border-white text-zinc-950 border-zinc-950 dark:hover:bg-zinc-950 dark:hover:border-zinc-300 dark:active:bg-zinc-950 hover:bg-zinc-50 dark:focus:bg-zinc-950 dark:active:border-zinc-400 dark:text-white active:border-zinc-600 hover:border-zinc-500 active:bg-zinc-100 focus:bg-transparent; } .atomic-button--dark-inverted { - @apply border-gray-950 text-gray-950 hover:border-transparent hover:text-white active:bg-gray-800 hover:bg-gray-950 focus:shadow-gray-500/50 dark:hover:bg-white dark:hover:text-black dark:bg-gray-950 dark:text-white dark:active:bg-gray-200 dark:active:border-gray-200 dark:border-white; + @apply border-zinc-950 text-zinc-950 hover:border-transparent hover:text-white active:bg-zinc-800 hover:bg-zinc-950 focus:shadow-zinc-500/50 dark:hover:bg-white dark:hover:text-black dark:bg-zinc-950 dark:text-white dark:active:bg-zinc-200 dark:active:border-zinc-200 dark:border-white; } .atomic-button--dark-shadow { - @apply text-white border-transparent shadow-xl dark:text-gray-950 bg-gray-950 active:bg-gray-900 hover:bg-gray-800 focus:bg-gray-800 focus:shadow-gray-500/50 dark:bg-white dark:hover:bg-gray-200 dark:hover:border-transparent dark:border-transparent active:text-white shadow-gray-500/30 dark:shadow-gray-200/30 dark:hover:shadow-gray-300/30 dark:focus:shadow-gray-300/30 dark:active:shadow-gray-400/30; + @apply text-white border-transparent shadow-xl dark:text-zinc-950 bg-zinc-950 active:bg-zinc-900 hover:bg-zinc-800 focus:bg-zinc-800 focus:shadow-zinc-500/50 dark:bg-white dark:hover:bg-zinc-200 dark:hover:border-transparent dark:border-transparent active:text-white shadow-zinc-500/30 dark:shadow-zinc-200/30 dark:hover:shadow-zinc-300/30 dark:focus:shadow-zinc-300/30 dark:active:shadow-zinc-400/30; } /* Buttons - loading */ diff --git a/assets/css/components/field.css b/assets/css/components/field.css index e25e93b5..90d19228 100644 --- a/assets/css/components/field.css +++ b/assets/css/components/field.css @@ -5,11 +5,11 @@ } .atomic-checkbox { - @apply w-5 h-5 transition-all duration-150 ease-linear border-gray-300 rounded cursor-pointer text-primary-500 dark:bg-gray-800 dark:border-gray-600 disabled:bg-gray-300 dark:disabled:bg-gray-600 disabled:cursor-not-allowed focus:ring-primary-500; + @apply w-5 h-5 transition-all duration-150 ease-linear border-zinc-300 rounded cursor-pointer text-primary-500 dark:bg-zinc-800 dark:border-zinc-600 disabled:bg-zinc-300 dark:disabled:bg-zinc-600 disabled:cursor-not-allowed focus:ring-primary-500; } .atomic-checkbox-label { - @apply inline-flex items-center gap-3 text-sm font-normal text-gray-900 cursor-pointer dark:text-gray-200; + @apply inline-flex items-center gap-3 text-sm font-normal text-zinc-900 cursor-pointer dark:text-zinc-200; } /* Checkbox group */ @@ -41,13 +41,13 @@ /* Select */ .atomic-select { - @apply block w-full py-2 pl-3 pr-10 text-base border-gray-300 rounded-md cursor-pointer focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500 disabled:bg-gray-100 disabled:cursor-not-allowed focus:outline-none sm:text-sm dark:disabled:bg-gray-700 dark:text-gray-300 dark:bg-gray-800; + @apply block w-full py-2 pl-3 pr-10 text-base border-zinc-300 rounded-md cursor-pointer focus:border-primary-500 focus:ring-primary-500 dark:border-zinc-600 dark:focus:border-primary-500 disabled:bg-zinc-100 disabled:cursor-not-allowed focus:outline-none sm:text-sm dark:disabled:bg-zinc-700 dark:text-zinc-300 dark:bg-zinc-800; } /* Text input */ .atomic-text-input { - @apply block w-full border-gray-300 rounded-md shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500 sm:text-sm disabled:bg-gray-100 disabled:cursor-not-allowed dark:bg-gray-800 dark:text-gray-300 dark:disabled:bg-gray-700 focus:outline-none; + @apply block w-full border-zinc-300 rounded-md shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-zinc-600 dark:focus:border-primary-500 sm:text-sm disabled:bg-zinc-100 disabled:cursor-not-allowed dark:bg-zinc-800 dark:text-zinc-300 dark:disabled:bg-zinc-700 focus:outline-none; } /* Switch */ @@ -57,15 +57,15 @@ } .atomic-switch-label { - @apply inline-flex items-center gap-3 text-sm font-normal text-gray-900 cursor-pointer dark:text-gray-200; + @apply inline-flex items-center gap-3 text-sm font-normal text-zinc-900 cursor-pointer dark:text-zinc-200; } .atomic-switch__input { - @apply absolute w-10 h-5 bg-white border-none rounded-full cursor-pointer peer-checked:border-0 checked:bg-transparent checked:focus:bg-transparent checked:hover:bg-transparent dark:bg-gray-800; + @apply absolute w-10 h-5 bg-white border-none rounded-full cursor-pointer peer-checked:border-0 checked:bg-transparent checked:focus:bg-transparent checked:hover:bg-transparent dark:bg-zinc-800; } .atomic-switch__fake-input { - @apply absolute h-6 mx-auto transition-colors duration-200 ease-in-out bg-gray-200 border rounded-full pointer-events-none w-11 dark:bg-gray-700 dark:border-gray-600 peer-checked:bg-primary-500; + @apply absolute h-6 mx-auto transition-colors duration-200 ease-in-out bg-zinc-200 border rounded-full pointer-events-none w-11 dark:bg-zinc-700 dark:border-zinc-600 peer-checked:bg-primary-500; } .atomic-switch__fake-input-bg { @@ -75,11 +75,11 @@ /* Radio */ .atomic-radio { - @apply w-4 h-4 border-gray-300 cursor-pointer text-primary-600 focus:ring-primary-500 dark:bg-gray-800 dark:border-gray-600; + @apply w-4 h-4 border-zinc-300 cursor-pointer text-primary-600 focus:ring-primary-500 dark:bg-zinc-800 dark:border-zinc-600; } .atomic-radio-label { - @apply inline-flex items-center gap-3 text-sm font-normal text-gray-900 cursor-pointer dark:text-gray-200; + @apply inline-flex items-center gap-3 text-sm font-normal text-zinc-900 cursor-pointer dark:text-zinc-200; } /* Radio group */ @@ -111,7 +111,7 @@ /* Color */ .atomic-color-input { - @apply border-gray-300 cursor-pointer focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500; + @apply border-zinc-300 cursor-pointer focus:border-primary-500 focus:ring-primary-500 dark:border-zinc-600 dark:focus:border-primary-500; } /* File */ @@ -123,13 +123,13 @@ /* Range */ .atomic-range-input { - @apply w-full border-gray-300 cursor-pointer focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500; + @apply w-full border-zinc-300 cursor-pointer focus:border-primary-500 focus:ring-primary-500 dark:border-zinc-600 dark:focus:border-primary-500; } /* Text */ .atomic-text-input { - @apply block w-full border-gray-300 rounded-md shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500 sm:text-sm disabled:bg-gray-100 disabled:cursor-not-allowed dark:bg-gray-800 dark:text-gray-300 dark:disabled:bg-gray-700 focus:outline-none; + @apply block w-full border-zinc-300 rounded-md shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-zinc-600 dark:focus:border-primary-500 sm:text-sm disabled:bg-zinc-100 disabled:cursor-not-allowed dark:bg-zinc-800 dark:text-zinc-300 dark:disabled:bg-zinc-700 focus:outline-none; } /* Form field wrapper */ @@ -162,7 +162,7 @@ /* Label */ .atomic-label { - @apply block mb-2 text-sm font-medium text-gray-900 dark:text-gray-200; + @apply block mb-2 text-sm font-medium text-zinc-900 dark:text-zinc-200; } .atomic-label--required:after { @@ -188,5 +188,5 @@ /* Help text */ .atomic-form-help-text { - @apply mt-2 text-sm text-gray-500 dark:text-gray-400; + @apply mt-2 text-sm text-zinc-500 dark:text-zinc-400; } diff --git a/assets/css/components/forms.css b/assets/css/components/forms.css index a7da40c9..b858ad98 100644 --- a/assets/css/components/forms.css +++ b/assets/css/components/forms.css @@ -5,11 +5,11 @@ } .atomic-checkbox { - @apply w-5 h-5 transition-all duration-150 ease-linear border-gray-300 rounded cursor-pointer text-primary-500 dark:bg-gray-800 dark:border-gray-600 disabled:bg-gray-300 dark:disabled:bg-gray-600 disabled:cursor-not-allowed focus:ring-primary-500; + @apply w-5 h-5 transition-all duration-150 ease-linear border-zinc-300 rounded cursor-pointer text-primary-500 dark:bg-zinc-800 dark:border-zinc-600 disabled:bg-zinc-300 dark:disabled:bg-zinc-600 disabled:cursor-not-allowed focus:ring-primary-500; } .atomic-checkbox-label { - @apply inline-flex items-center gap-3 text-sm font-normal text-gray-900 cursor-pointer dark:text-gray-200; + @apply inline-flex items-center gap-3 text-sm font-normal text-zinc-900 cursor-pointer dark:text-zinc-200; } /* Checkbox group */ @@ -41,13 +41,13 @@ /* Select */ .atomic-select { - @apply block w-full py-2 pl-3 pr-10 text-base border-gray-300 rounded-md cursor-pointer focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500 disabled:bg-gray-100 disabled:cursor-not-allowed focus:outline-none sm:text-sm dark:disabled:bg-gray-700 dark:text-gray-300 dark:bg-gray-800; + @apply block w-full py-2 pl-3 pr-10 text-base border-zinc-300 rounded-md cursor-pointer focus:border-primary-500 focus:ring-primary-500 dark:border-zinc-600 dark:focus:border-primary-500 disabled:bg-zinc-100 disabled:cursor-not-allowed focus:outline-none sm:text-sm dark:disabled:bg-zinc-700 dark:text-zinc-300 dark:bg-zinc-800; } /* Text input */ .atomic-text-input { - @apply block w-full border-gray-300 rounded-md shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500 sm:text-sm disabled:bg-gray-100 disabled:cursor-not-allowed dark:bg-gray-800 dark:text-gray-300 dark:disabled:bg-gray-700 focus:outline-none; + @apply block w-full border-zinc-300 rounded-md shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-zinc-600 dark:focus:border-primary-500 sm:text-sm disabled:bg-zinc-100 disabled:cursor-not-allowed dark:bg-zinc-800 dark:text-zinc-300 dark:disabled:bg-zinc-700 focus:outline-none; } /* Switch */ @@ -57,15 +57,15 @@ } .atomic-switch-label { - @apply inline-flex items-center gap-3 text-sm font-normal text-gray-900 cursor-pointer dark:text-gray-200; + @apply inline-flex items-center gap-3 text-sm font-normal text-zinc-900 cursor-pointer dark:text-zinc-200; } .atomic-switch__input { - @apply absolute w-10 h-5 bg-white border-none rounded-full cursor-pointer peer-checked:border-0 checked:bg-transparent checked:focus:bg-transparent checked:hover:bg-transparent dark:bg-gray-800; + @apply absolute w-10 h-5 bg-white border-none rounded-full cursor-pointer peer-checked:border-0 checked:bg-transparent checked:focus:bg-transparent checked:hover:bg-transparent dark:bg-zinc-800; } .atomic-switch__fake-input { - @apply absolute h-6 mx-auto transition-colors duration-200 ease-in-out bg-gray-200 border rounded-full pointer-events-none w-11 dark:bg-gray-700 dark:border-gray-600 peer-checked:bg-primary-500; + @apply absolute h-6 mx-auto transition-colors duration-200 ease-in-out bg-zinc-200 border rounded-full pointer-events-none w-11 dark:bg-zinc-700 dark:border-zinc-600 peer-checked:bg-primary-500; } .atomic-switch__fake-input-bg { @@ -75,11 +75,11 @@ /* Radio */ .atomic-radio { - @apply w-4 h-4 border-gray-300 cursor-pointer text-primary-600 focus:ring-primary-500 dark:bg-gray-800 dark:border-gray-600; + @apply w-4 h-4 border-zinc-300 cursor-pointer text-primary-600 focus:ring-primary-500 dark:bg-zinc-800 dark:border-zinc-600; } .atomic-radio-label { - @apply inline-flex items-center gap-3 text-sm font-normal text-gray-900 cursor-pointer dark:text-gray-200; + @apply inline-flex items-center gap-3 text-sm font-normal text-zinc-900 cursor-pointer dark:text-zinc-200; } /* Radio group */ @@ -111,7 +111,7 @@ /* Color */ .atomic-color-input { - @apply border-gray-300 cursor-pointer focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500; + @apply border-zinc-300 cursor-pointer focus:border-primary-500 focus:ring-primary-500 dark:border-zinc-600 dark:focus:border-primary-500; } /* File */ @@ -123,7 +123,7 @@ /* Range */ .atomic-range-input { - @apply w-full border-gray-300 cursor-pointer focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500; + @apply w-full border-zinc-300 cursor-pointer focus:border-primary-500 focus:ring-primary-500 dark:border-zinc-600 dark:focus:border-primary-500; } .atomic-range-input::-webkit-slider-thumb { @@ -133,7 +133,7 @@ /* Text */ .atomic-text-input { - @apply block w-full border-gray-300 rounded-md shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-gray-600 dark:focus:border-primary-500 sm:text-sm disabled:bg-gray-100 disabled:cursor-not-allowed dark:bg-gray-800 dark:text-gray-300 dark:disabled:bg-gray-700 focus:outline-none; + @apply block w-full border-zinc-300 rounded-md shadow-sm focus:border-primary-500 focus:ring-primary-500 dark:border-zinc-600 dark:focus:border-primary-500 sm:text-sm disabled:bg-zinc-100 disabled:cursor-not-allowed dark:bg-zinc-800 dark:text-zinc-300 dark:disabled:bg-zinc-700 focus:outline-none; } /* Form field wrapper */ @@ -166,7 +166,7 @@ /* Label */ .atomic-label { - @apply block mb-2 text-sm font-medium text-gray-900 dark:text-gray-200; + @apply block mb-2 text-sm font-medium text-zinc-900 dark:text-zinc-200; } .atomic-label--required:after { @@ -192,5 +192,5 @@ /* Help text */ .atomic-form-help-text { - @apply mt-2 text-sm text-gray-500 dark:text-gray-400; + @apply mt-2 text-sm text-zinc-500 dark:text-zinc-400; } diff --git a/assets/tailwind.config.js b/assets/tailwind.config.js index 201fc0ee..c68b4649 100644 --- a/assets/tailwind.config.js +++ b/assets/tailwind.config.js @@ -21,7 +21,7 @@ module.exports = { danger: colors.red, warning: colors.yellow, info: colors.blue, - gray: colors.gray, + zinc: colors.zinc, }, backgroundImage: { 'hero-pattern': "url('/images/atomic_background.svg')", diff --git a/lib/atomic_web/components/activity.ex b/lib/atomic_web/components/activity.ex index 6f98b8e6..70839ebe 100644 --- a/lib/atomic_web/components/activity.ex +++ b/lib/atomic_web/components/activity.ex @@ -15,30 +15,30 @@ defmodule AtomicWeb.Components.Activity do
- <.avatar name={@activity.organization.name} color={:light_gray} class="!h-10 !w-10" size={:xs} type={:organization} src={Uploaders.Logo.url({@activity.organization.logo, @activity.organization}, :original)} /> + <.avatar name={@activity.organization.name} color={:light_zinc} class="!h-10 !w-10" size={:xs} type={:organization} src={Uploaders.Logo.url({@activity.organization.logo, @activity.organization}, :original)} />
<.link navigate={~p"/organizations/#{@activity.organization.id}"}> - + <%= @activity.organization.name %> -

+

Published on

-

<%= @activity.title %>

-
-

<%= @activity.description %>

+

<%= @activity.title %>

+
+

<%= maybe_slice_string(@activity.description, 300) %>

<%= if @activity.image do %>
- +
<% end %> @@ -46,22 +46,22 @@ defmodule AtomicWeb.Components.Activity do
- <.icon name="hero-clock-solid" class="size-5" /> - <%= relative_datetime(@activity.start) %> + <.icon name="hero-calendar-solid" class="mr-1.5 h-5 w-5 flex-shrink-0 text-zinc-400" /> + <%= pretty_display_date(@activity.start) %> starting in <.icon name="hero-user-group-solid" class="size-5" /> - <%= @activity.enrolled %>/<%= @activity.maximum_entries %> - enrollments + <%= @activity.enrolled %>/<%= @activity.maximum_entries %> + enrollments <.icon name="hero-map-pin-solid" class="size-5" /> - <%= @activity.location.name %> + <%= @activity.location.name %> location diff --git a/lib/atomic_web/components/announcement.ex b/lib/atomic_web/components/announcement.ex index f96ba8a2..cba27235 100644 --- a/lib/atomic_web/components/announcement.ex +++ b/lib/atomic_web/components/announcement.ex @@ -13,30 +13,30 @@ defmodule AtomicWeb.Components.Announcement do
- <.avatar name={@announcement.organization.name} color={:light_gray} class="!h-10 !w-10" size={:xs} type={:organization} src={Uploaders.Logo.url({@announcement.organization.logo, @announcement.organization}, :original)} /> + <.avatar name={@announcement.organization.name} color={:light_zinc} class="!h-10 !w-10" size={:xs} type={:organization} src={Uploaders.Logo.url({@announcement.organization.logo, @announcement.organization}, :original)} />
<.link navigate={~p"/organizations/#{@announcement.organization.id}"} class="hover:underline focus:outline-none"> -

+

<%= @announcement.organization.name %>

-

+

Published on

-

<%= @announcement.title %>

-
- <%= @announcement.description %> +

<%= @announcement.title %>

+
+ <%= maybe_slice_string(@announcement.description, 300) %>
<%= if @announcement.image do %>
- +
<% end %>
diff --git a/lib/atomic_web/components/avatar.ex b/lib/atomic_web/components/avatar.ex index 2db00526..c6bef703 100644 --- a/lib/atomic_web/components/avatar.ex +++ b/lib/atomic_web/components/avatar.ex @@ -21,7 +21,7 @@ defmodule AtomicWeb.Components.Avatar do doc: "The size of the avatar." attr :color, :atom, - default: :light_gray, + default: :light_zinc, values: [ :primary, :secondary, @@ -29,8 +29,8 @@ defmodule AtomicWeb.Components.Avatar do :success, :warning, :danger, - :gray, - :light_gray, + :zinc, + :light_zinc, :pure_white, :white, :light, @@ -74,7 +74,7 @@ defmodule AtomicWeb.Components.Avatar do doc: "The size of the avatars." attr :color, :atom, - default: :light_gray, + default: :light_zinc, values: [ :primary, :secondary, @@ -82,8 +82,8 @@ defmodule AtomicWeb.Components.Avatar do :success, :warning, :danger, - :gray, - :light_gray, + :zinc, + :light_zinc, :pure_white, :white, :light, diff --git a/lib/atomic_web/components/badge.ex b/lib/atomic_web/components/badge.ex index f188c321..28632a79 100644 --- a/lib/atomic_web/components/badge.ex +++ b/lib/atomic_web/components/badge.ex @@ -16,7 +16,7 @@ defmodule AtomicWeb.Components.Badge do attr :color, :atom, default: :primary, - values: [:primary, :secondary, :info, :success, :warning, :danger, :gray], + values: [:primary, :secondary, :info, :success, :warning, :danger, :zinc], doc: "Badge color." attr :icon_position, :atom, diff --git a/lib/atomic_web/components/button.ex b/lib/atomic_web/components/button.ex index b8770536..27ff2863 100644 --- a/lib/atomic_web/components/button.ex +++ b/lib/atomic_web/components/button.ex @@ -24,7 +24,7 @@ defmodule AtomicWeb.Components.Button do :success, :warning, :danger, - :gray, + :zinc, :pure_white, :white, :light, diff --git a/lib/atomic_web/components/dropdown.ex b/lib/atomic_web/components/dropdown.ex index e000815c..c0760847 100644 --- a/lib/atomic_web/components/dropdown.ex +++ b/lib/atomic_web/components/dropdown.ex @@ -41,7 +41,7 @@ defmodule AtomicWeb.Components.Dropdown do JS.hide(to: "##{@id}", transition: {"ease-in duration-75", "transform opacity-100 scale-100", "transform opacity-0 scale-95"}) end } - class={"#{item[:class]} flex items-center gap-x-2 px-4 py-2 text-sm text-gray-700 hover:bg-gray-100 hover:text-gray-900"} + class={"#{item[:class]} flex items-center gap-x-2 px-4 py-2 text-sm text-zinc-700 hover:bg-zinc-100 hover:text-zinc-900"} role="menuitem" method={Map.get(item, :method, "get")} > @@ -51,7 +51,7 @@ defmodule AtomicWeb.Components.Dropdown do <%= item.name %> <% else %> -
+
<%= if item[:icon] do %> <.icon name={item.icon} class="size-5 ml-2 inline-block" /> <% end %> diff --git a/lib/atomic_web/components/image_uploader.ex b/lib/atomic_web/components/image_uploader.ex index c94a8338..02e2c553 100644 --- a/lib/atomic_web/components/image_uploader.ex +++ b/lib/atomic_web/components/image_uploader.ex @@ -20,7 +20,7 @@ defmodule AtomicWeb.Components.ImageUploader do -
+
@@ -47,7 +47,7 @@ defmodule AtomicWeb.Components.ImageUploader do <% end %>
diff --git a/lib/atomic_web/components/page.ex b/lib/atomic_web/components/page.ex index cb5ae06a..032b2314 100644 --- a/lib/atomic_web/components/page.ex +++ b/lib/atomic_web/components/page.ex @@ -20,7 +20,7 @@ defmodule AtomicWeb.Components.Page do
-

+

<%= @title %>

<%= render_slot(@actions) %> diff --git a/lib/atomic_web/components/sidebar.ex b/lib/atomic_web/components/sidebar.ex index 1dc89f52..d8f7768c 100644 --- a/lib/atomic_web/components/sidebar.ex +++ b/lib/atomic_web/components/sidebar.ex @@ -122,7 +122,7 @@ defmodule AtomicWeb.Components.Sidebar do <:wrapper> diff --git a/lib/atomic_web/components/socials.ex b/lib/atomic_web/components/socials.ex new file mode 100644 index 00000000..87175a0a --- /dev/null +++ b/lib/atomic_web/components/socials.ex @@ -0,0 +1,43 @@ +defmodule AtomicWeb.Components.Socials do + @moduledoc false + + use AtomicWeb, :component + + attr :entity, :map, required: true + + def socials(assigns) do + assigns = assign(assigns, :socials_with_values, get_social_values(assigns.entity)) + + ~H""" +
+ <%= for {social, icon, url_base, social_value} <- @socials_with_values do %> + <%= if social_value do %> +
+ icon} class="h-5 w-5" alt={Atom.to_string(social)} /> + <.link class="capitalize text-blue-500" target="_blank" href={url_base <> social_value}> + <%= Atom.to_string(social) %> + +
+ <% end %> + <% end %> +
+ """ + end + + defp get_social_values(entity) do + get_socials() + |> Enum.map(fn {social, icon, url_base} -> + social_value = Map.get(entity, social) + {social, icon, url_base, social_value} + end) + end + + def get_socials do + [ + {:tiktok, "tiktok.svg", "https://tiktok.com/"}, + {:instagram, "instagram.svg", "https://instagram.com/"}, + {:facebook, "facebook.svg", "https://facebook.com/"}, + {:x, "x.svg", "https://x.com/"} + ] + end +end diff --git a/lib/atomic_web/components/tabs.ex b/lib/atomic_web/components/tabs.ex index 58c0fe72..1e565b1f 100644 --- a/lib/atomic_web/components/tabs.ex +++ b/lib/atomic_web/components/tabs.ex @@ -13,7 +13,7 @@ defmodule AtomicWeb.Components.Tabs do {@rest} class={[ "flex gap-x-8 gap-y-2", - @underline && "border-b border-gray-200", + @underline && "border-b border-zinc-200", @class ]} aria-label="Tabs" @@ -53,7 +53,7 @@ defmodule AtomicWeb.Components.Tabs do active_classes = if active, do: "bg-orange-100 text-orange-600", - else: "text-gray-500 hover:text-gray-600" + else: "text-zinc-500 hover:text-zinc-600" [base_classes, active_classes] end @@ -64,12 +64,12 @@ defmodule AtomicWeb.Components.Tabs do active_classes = if active, do: "border-orange-500 text-orange-600", - else: "text-gray-500 border-transparent hover:border-gray-300 hover:text-gray-600" + else: "text-zinc-500 border-transparent hover:border-zinc-300 hover:text-zinc-600" underline_classes = if active && underline, do: "", - else: "hover:border-gray-300" + else: "hover:border-zinc-300" [base_classes, active_classes, underline_classes] end @@ -80,12 +80,12 @@ defmodule AtomicWeb.Components.Tabs do active_classes = if active, do: "text-white bg-orange-600", - else: "text-white bg-gray-500" + else: "text-white bg-zinc-500" underline_classes = if active, do: "bg-orange-100 text-orange-600", - else: "text-gray-500 bg-gray-100" + else: "text-zinc-500 bg-zinc-100" [base_classes, active_classes, underline_classes] end @@ -96,7 +96,7 @@ defmodule AtomicWeb.Components.Tabs do active_classes = if active, do: "text-white bg-primary-600", - else: "text-white bg-gray-500" + else: "text-white bg-zinc-500" [base_classes, active_classes] end diff --git a/lib/atomic_web/components/unauthenticated.ex b/lib/atomic_web/components/unauthenticated.ex new file mode 100644 index 00000000..27d6f958 --- /dev/null +++ b/lib/atomic_web/components/unauthenticated.ex @@ -0,0 +1,24 @@ +defmodule AtomicWeb.Components.Unauthenticated do + @moduledoc """ + A component for displaying an unauthenticated state. + """ + use AtomicWeb, :component + + attr :id, :string, default: "unauthenticated-state", required: false + attr :url, :string, default: "users/log_in", required: false + + def unauthenticated_state(assigns) do + ~H""" +
+ <.icon name="hero-user-circle" class="mx-auto h-12 w-12 text-zinc-400" /> +

<%= gettext("You are not authenticated") %>

+

<%= gettext("Please log in to view this content.") %>

+
+ <.button patch={@url} icon="hero-arrow-right-end-on-rectangle-solid" icon_position={:right}> + <%= gettext("Log In") %> + +
+
+ """ + end +end diff --git a/lib/atomic_web/live/activity_live/form_component.ex b/lib/atomic_web/live/activity_live/form_component.ex index 4e039b8f..ec6eb317 100644 --- a/lib/atomic_web/live/activity_live/form_component.ex +++ b/lib/atomic_web/live/activity_live/form_component.ex @@ -75,7 +75,7 @@ defmodule AtomicWeb.ActivityLive.FormComponent do consume_uploaded_entries(socket, :image, fn %{path: path}, entry -> Activities.update_activity_image(activity, %{ "image" => %Plug.Upload{ - content_type: entry.content_type, + content_type: entry.client_type, filename: entry.client_name, path: path } diff --git a/lib/atomic_web/live/activity_live/form_component.html.heex b/lib/atomic_web/live/activity_live/form_component.html.heex index 6ba98a7b..b948949d 100644 --- a/lib/atomic_web/live/activity_live/form_component.html.heex +++ b/lib/atomic_web/live/activity_live/form_component.html.heex @@ -1,6 +1,6 @@
<.form id="activity-form" for={@form} phx-change="validate" phx-submit="save" phx-target={@myself}> -
+
<.field type="text" field={@form[:title]} placeholder="Choose a title" required /> diff --git a/lib/atomic_web/live/calendar_live/components/month.ex b/lib/atomic_web/live/calendar_live/components/month.ex index f0ddefd1..ec0d5d95 100644 --- a/lib/atomic_web/live/calendar_live/components/month.ex +++ b/lib/atomic_web/live/calendar_live/components/month.ex @@ -48,7 +48,7 @@ defmodule AtomicWeb.CalendarLive.Components.CalendarMonth do
  1. - <.link patch={~p"/activities/#{activity}"} class="group flex justify-between p-4 pr-6 focus-within:bg-gray-50 hover:bg-gray-50"> + <.link patch={~p"/activities/#{activity}"} class="group flex justify-between p-4 pr-6 focus-within:bg-zinc-50 hover:bg-zinc-50">

    <%= activity.title %> diff --git a/lib/atomic_web/live/calendar_live/show.html.heex b/lib/atomic_web/live/calendar_live/show.html.heex index 8b706aae..40286114 100644 --- a/lib/atomic_web/live/calendar_live/show.html.heex +++ b/lib/atomic_web/live/calendar_live/show.html.heex @@ -1,7 +1,7 @@ <.page title="Calendar"> -

    +
    -
    +
    @@ -21,15 +21,15 @@
    - - - - @@ -48,7 +48,7 @@ } > <:wrapper> - + <% else %> - + <% end %>
    2. """ end + def handle_event("follow", _params, socket) when is_nil(socket.assigns.current_user) do + {:noreply, + socket + |> put_flash(:info, "You must be logged in to follow organizations") + |> redirect(to: ~p"/users/log_in")} + end + @impl true def handle_event("follow", %{"organization_id" => organization_id} = _params, socket) do attrs = %{ diff --git a/lib/atomic_web/live/home_live/components/schedule.ex b/lib/atomic_web/live/home_live/components/schedule.ex index 9a776dd1..20a41d39 100644 --- a/lib/atomic_web/live/home_live/components/schedule.ex +++ b/lib/atomic_web/live/home_live/components/schedule.ex @@ -1,62 +1,102 @@ defmodule AtomicWeb.HomeLive.Components.Schedule do @moduledoc false use AtomicWeb, :component + alias Atomic.Activities attr :schedule, :map, required: true, doc: "The schedule to display." + attr :current_user, :map, required: true, doc: "The current user." + attr :tab, :string, default: "all", values: ["all", "user"], doc: "The tab active." def schedule(assigns) do ~H"""
    -
    -

    + <%= if length(@schedule.daily) == 0 && length(@schedule.weekly) == 0 do %> +

    + <%= show_empty(assigns) %> +
    + <% end %> +
    +

    Today

    -
      +
        <%= for entry <- @schedule.daily do %> <.link navigate={~p"/activities/#{entry}"}> -
      • -

        - <%= entry.title %> -

        -
        - <.icon name="hero-clock-solid" class="size-4" /> -

        - <%= display_time(entry.start) %> - <%= display_time(entry.finish) %> +

      • +
        +

        + <%= entry.title %>

        +
        + <.icon name="hero-clock-solid" class="size-4" /> +

        + <%= display_time(entry.start) %> - <%= display_time(entry.finish) %> +

        +
        -

        - <%= entry.description %> +

        + <%= maybe_slice_string(entry.description, 100) %>

        • + <%= if check_enrolled(entry, @current_user) do %> +
        + <.icon name="hero-user-group-solid" class="size-4 font-bold text-green-500" /> + <.link navigate={~p"/organizations/#{entry.organization_id}"} class="text-xs text-zinc-400 hover:underline"> + <%= entry.organization.name %> + +
        + <% else %> +
        + <.link navigate={~p"/organizations/#{entry.organization_id}"} class="text-xs text-zinc-400 hover:underline"> + <%= entry.organization.name %> + +
        + <% end %> <% end %>
    -
    -

    +

    +

    This week

    -
      +
        <%= for entry <- @schedule.weekly do %> <.link navigate={~p"/activities/#{entry}"}> -
      • -

        - <%= entry.title %> -

        -
        - <.icon name="hero-clock-solid" class="size-4" /> -

        - <%= pretty_display_date(entry.start) %> +

      • +
        +

        + <%= entry.title %>

        +
        + <.icon name="hero-calendar-solid" class="size-4" /> +

        + <%= pretty_display_date(entry.start) %> +

        +
        -

        - <%= entry.description %> +

        + <%= maybe_slice_string(entry.description, 150) %>

        • + <%= if check_enrolled(entry, @current_user) do %> +
        + <.icon name="hero-user-group-solid" class="size-4 font-bold text-green-500" /> + <.link navigate={~p"/organizations/#{entry.organization_id}"} class="text-xs text-zinc-400 hover:underline"> + <%= entry.organization.name %> + +
        + <% else %> +
        + <.link navigate={~p"/organizations/#{entry.organization.id}"} class="text-xs text-zinc-400 hover:underline"> + <%= entry.organization.name %> + +
        + <% end %> <% end %>
    @@ -64,4 +104,29 @@ defmodule AtomicWeb.HomeLive.Components.Schedule do
    """ end + + defp check_enrolled(_entry, nil), do: false + defp check_enrolled(entry, user), do: Activities.participating?(entry.id, user.id) + + defp show_empty(assigns) when assigns.tab == "user" do + ~H""" +

    + <%= gettext("Nothing to do in the next week.") %> +

    +

    + <%= gettext("Try enrolling in some activities.") %> +

    + <.button patch={~p"/activities"} color={:white} size={:md} icon="hero-academic-cap"> + <%= gettext("Browse activities") %> + + """ + end + + defp show_empty(assigns) when assigns.tab == "all" do + ~H""" +

    + <%= gettext("No activities scheduled to the next week.") %> +

    + """ + end end diff --git a/lib/atomic_web/live/home_live/index.ex b/lib/atomic_web/live/home_live/index.ex index f4ebf82a..c4224b28 100644 --- a/lib/atomic_web/live/home_live/index.ex +++ b/lib/atomic_web/live/home_live/index.ex @@ -2,7 +2,7 @@ defmodule AtomicWeb.HomeLive.Index do @moduledoc false use AtomicWeb, :live_view - import AtomicWeb.Components.{Activity, Announcement, Tabs} + import AtomicWeb.Components.{Activity, Announcement, Tabs, Unauthenticated, Dropdown} import AtomicWeb.HomeLive.Components.{FollowSuggestions, Schedule} alias Atomic.Activities @@ -26,8 +26,10 @@ defmodule AtomicWeb.HomeLive.Index do socket |> assign(:current_page, :home) |> assign(:page_title, gettext("Home")) - |> assign(:schedule, fetch_schedule(socket)) + |> assign(:schedule_default, fetch_default_schedule()) + |> assign(:schedule_user, fetch_user_schedule(socket.assigns.current_user)) |> assign(:current_tab, current_tab(socket, params)) + |> assign(:schedule, :default) |> assign(:organizations, list_organizations_to_follow(socket.assigns))} end @@ -71,6 +73,12 @@ defmodule AtomicWeb.HomeLive.Index do def handle_event("load-following", _, socket) when socket.assigns.current_tab == "following", do: {:noreply, socket} + def handle_event("load-following", _, socket) when socket.assigns.is_authenticated? == false, + do: + {:noreply, + socket + |> assign(:current_tab, "following")} + def handle_event("load-following", _, socket) do current_user = socket.assigns.current_user @@ -93,18 +101,29 @@ defmodule AtomicWeb.HomeLive.Index do |> assign(:current_tab, "schedule")} end - defp fetch_schedule(socket) when socket.assigns.is_authenticated? do + def handle_event("show-schedule-default", _, socket) do + {:noreply, + socket + |> assign(:schedule, :default)} + end + + def handle_event("show-schedule-user", _, socket) do + {:noreply, + socket + |> assign(:schedule, :user)} + end + + defp fetch_user_schedule(nil), do: %{daily: [], weekly: []} + + defp fetch_user_schedule(user) do {daily, weekly} = - Activities.list_user_activities(socket.assigns.current_user.id, - preloads: [:organization], - order_by: [desc: :start] - ) + Activities.list_user_activities(user.id, preloads: [:organization], order_by: [desc: :start]) |> Enum.reduce({[], []}, &process_activity/2) %{daily: Enum.take(daily, 3), weekly: Enum.take(weekly, 3)} end - defp fetch_schedule(_socket) do + defp fetch_default_schedule do {daily, weekly} = Activities.list_activities(preloads: [:organization], order_by: [desc: :start]) |> Enum.reduce({[], []}, &process_activity/2) @@ -113,7 +132,7 @@ defmodule AtomicWeb.HomeLive.Index do end defp process_activity(activity, {daily_acc, weekly_acc}) do - case within_today_or_this_week(activity.start) do + case within_today_or_this_week(activity.start |> NaiveDateTime.to_date()) do :today -> {[activity | daily_acc], weekly_acc} diff --git a/lib/atomic_web/live/home_live/index.html.heex b/lib/atomic_web/live/home_live/index.html.heex index 57d96496..dc0d828c 100644 --- a/lib/atomic_web/live/home_live/index.html.heex +++ b/lib/atomic_web/live/home_live/index.html.heex @@ -7,11 +7,11 @@
    <%= if @is_authenticated? do %> -

    +

    Welcome, <%= @current_user.name %>

    <% else %> -

    +

    Welcome to Atomic

    <% end %> @@ -30,7 +30,7 @@ <.tab id="tab-following" active={@current_tab == "following"} phx-click="load-following" phx-hook="ScrollToTop"> <%= gettext("Following") %> - <%= if length(@schedule.weekly) + length(@schedule.daily) > 0 do %> + <%= if length(@schedule_default.weekly) + length(@schedule_default.daily) > 0 do %> <.tab id="tab-schedule" active={@current_tab == "schedule"} phx-click="load-schedule" phx-hook="ScrollToTop" class="lg:hidden"> <%= gettext("Schedule") %> @@ -39,35 +39,74 @@
    <%= if @current_tab != "schedule" do %> -
      -
    • - <%= if post.type == :activity do %> - <.link navigate={~p"/activities/#{post.activity}"}> - <.activity activity={post.activity} /> - - <% else %> - <.link navigate={~p"/announcements/#{post.announcement}"}> - <.announcement announcement={post.announcement} /> - - <% end %> -
      • -
    + <%= if @is_authenticated? == false && @current_tab == "following" do %> +
    + <.unauthenticated_state /> +
    + <% else %> +
      +
    • + <%= if post.type == :activity do %> + <.link navigate={~p"/activities/#{post.activity}"}> + <.activity activity={post.activity} /> + + <% else %> + <.link navigate={~p"/announcements/#{post.announcement}"}> + <.announcement announcement={post.announcement} /> + + <% end %> +
      • +
    + <% end %> <% else %> - <.schedule schedule={@schedule} /> + <.schedule schedule={@schedule_default} current_user={@current_user} /> <% end %>
- diff --git a/lib/atomic_web/live/organization_live/index.html.heex b/lib/atomic_web/live/organization_live/index.html.heex index 25f8ae65..c9eb9a73 100644 --- a/lib/atomic_web/live/organization_live/index.html.heex +++ b/lib/atomic_web/live/organization_live/index.html.heex @@ -16,7 +16,7 @@ <%= for organization <- @organizations do %> <.link navigate={~p"/organizations/#{organization.id}"}>
- <.avatar name={organization.name} src={Uploaders.Logo.url({organization.logo, organization}, :original)} type={:organization} size={:lg} color={:light_gray} /> + <.avatar name={organization.name} src={Uploaders.Logo.url({organization.logo, organization}, :original)} type={:organization} size={:lg} color={:light_zinc} />

<%= organization.name %> diff --git a/lib/atomic_web/live/organization_live/show.html.heex b/lib/atomic_web/live/organization_live/show.html.heex index a639572f..d4492d76 100644 --- a/lib/atomic_web/live/organization_live/show.html.heex +++ b/lib/atomic_web/live/organization_live/show.html.heex @@ -4,14 +4,14 @@
- <.avatar name={@organization.name} type={:organization} src={Logo.url({@organization.logo, @organization}, :original)} size={:xl} color={:light_gray} /> + <.avatar name={@organization.name} type={:organization} src={Logo.url({@organization.logo, @organization}, :original)} size={:xl} color={:light_zinc} />

<%= @organization.name %>

-

+

<%= @organization.long_name %>

@@ -36,7 +36,7 @@