From 8648cef3d89113103aa755493053cd582dee15c5 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Sat, 5 Jun 2021 20:55:56 +1000 Subject: [PATCH 1/6] oops --- crabfit-frontend/src/pages/Create/Create.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/crabfit-frontend/src/pages/Create/Create.tsx b/crabfit-frontend/src/pages/Create/Create.tsx index 93d2cb4..312d19d 100644 --- a/crabfit-frontend/src/pages/Create/Create.tsx +++ b/crabfit-frontend/src/pages/Create/Create.tsx @@ -156,7 +156,7 @@ const Create = ({ offline }) => { CRAB FIT - {!createdEvent ? ( + {createdEvent ? (

{t('common:created', { date: createdEvent?.name })}

From dada28d723da42ddf3eada08fe70e2c2862b2121 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Sat, 5 Jun 2021 22:03:56 +1000 Subject: [PATCH 2/6] Update buttons, infer width from content --- .../src/components/Button/Button.tsx | 21 ++--- .../src/components/Button/buttonStyle.ts | 88 +++++++++++-------- .../CalendarField/CalendarField.tsx | 8 +- .../src/components/Donate/Donate.tsx | 14 +-- .../GoogleCalendar/GoogleCalendar.tsx | 4 +- .../OutlookCalendar/OutlookCalendar.tsx | 4 +- crabfit-frontend/src/pages/Create/Create.tsx | 2 +- crabfit-frontend/src/pages/Event/Event.tsx | 1 - crabfit-frontend/src/pages/Help/Help.tsx | 2 +- .../src/pages/Privacy/Privacy.tsx | 2 +- 10 files changed, 70 insertions(+), 76 deletions(-) diff --git a/crabfit-frontend/src/components/Button/Button.tsx b/crabfit-frontend/src/components/Button/Button.tsx index 896d574..b17ee4e 100644 --- a/crabfit-frontend/src/components/Button/Button.tsx +++ b/crabfit-frontend/src/components/Button/Button.tsx @@ -1,16 +1,13 @@ -import { Wrapper, Top, Bottom } from './buttonStyle'; +import { Pressable } from './buttonStyle'; -const Button = ({ - buttonHeight, - buttonWidth, - primaryColor, - secondaryColor, - ...props -}) => ( - - - - +const Button = ({ href, type = 'button', ...props }) => ( + ); export default Button; diff --git a/crabfit-frontend/src/components/Button/buttonStyle.ts b/crabfit-frontend/src/components/Button/buttonStyle.ts index c3a6338..7779d1d 100644 --- a/crabfit-frontend/src/components/Button/buttonStyle.ts +++ b/crabfit-frontend/src/components/Button/buttonStyle.ts @@ -1,40 +1,60 @@ import styled from '@emotion/styled'; -export const Wrapper = styled.div` - display: inline-block; - position: relative; +export const Pressable = styled.button` + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + text-align: center; + cursor: pointer; + border: 0; + text-decoration: none; + font: inherit; + box-sizing: border-box; + background: ${props => props.primaryColor || props.theme.primary}; + color: #FFF; + font-weight: 600; + text-shadow: 0 -1px .5px ${props => props.secondaryColor || props.theme.primaryDark}; + transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1); + border-radius: 3px; + padding: ${props => props.small ? '.4em 1.3em' : '.6em 1.5em'}; + transform-style: preserve-3d; + margin-bottom: 5px; - --btn-height: ${props => props.buttonHeight || '40px'}; - --btn-width: ${props => props.buttonWidth || '100px'}; + ${props => props.size && ` + padding: 0; + height: ${props.size}; + width: ${props.size}; + `} - height: var(--btn-height); - width: var(--btn-width); -`; + &::before { + content: ''; + position: absolute; + height: 100%; + width: 100%; + top: 0; + left: 0; + background: ${props => props.secondaryColor || props.theme.primaryDark}; + border-radius: inherit; + transform: translate3d(0, 5px, -1em); + transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1); + } -export const Top = styled.button` - border: 0; - cursor: pointer; - font: inherit; - box-sizing: border-box; - background: ${props => props.primaryColor || props.theme.primary}; - color: #FFF; - font-weight: 600; - text-shadow: 0 -1.5px .5px ${props => props.secondaryColor || props.theme.primaryDark}; - padding: 0; - border-radius: 3px; - height: var(--btn-height); - width: var(--btn-width); - position: absolute; - top: -4px; - left: 0; - user-select: none; - transition: top .15s; + &:hover { + transform: translate(0, 1px); + &::before { + transform: translate3d(0, 4px, -1em); + } + } - &:active { - top: 0; - } + &:active { + transform: translate(0, 5px); + &::before { + transform: translate3d(0, 0, -1em); + } + } - ${props => props.isLoading && ` + ${props => props.isLoading && ` text-shadow: none; color: transparent; cursor: wait; @@ -84,11 +104,3 @@ export const Top = styled.button` } `} `; - -export const Bottom = styled.div` - box-sizing: border-box; - background: ${props => props.secondaryColor || props.theme.primaryDark}; - border-radius: 3px; - height: var(--btn-height); - width: var(--btn-width); -`; diff --git a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx index 0844a8b..5957d0a 100644 --- a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx +++ b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx @@ -122,10 +122,8 @@ const CalendarField = ({ <> {dayjs.months()[month]} {year} - + >{t('donate.button')} { + )} diff --git a/crabfit-frontend/src/pages/Event/Event.tsx b/crabfit-frontend/src/pages/Event/Event.tsx index 6b64e8e..39e2bf3 100644 --- a/crabfit-frontend/src/pages/Event/Event.tsx +++ b/crabfit-frontend/src/pages/Event/Event.tsx @@ -349,7 +349,6 @@ const Event = (props) => { type="submit" isLoading={isLoginLoading} disabled={isLoginLoading || isLoading} - buttonWidth={`${Math.max(t('event:form.button').length*11, 100)}px`} >{t('event:form.button')} setError(null)}>{error} diff --git a/crabfit-frontend/src/pages/Help/Help.tsx b/crabfit-frontend/src/pages/Help/Help.tsx index 57bab1b..4196595 100644 --- a/crabfit-frontend/src/pages/Help/Help.tsx +++ b/crabfit-frontend/src/pages/Help/Help.tsx @@ -84,7 +84,7 @@ const Help = () => { -
+
diff --git a/crabfit-frontend/src/pages/Privacy/Privacy.tsx b/crabfit-frontend/src/pages/Privacy/Privacy.tsx index e9f0eff..b3af673 100644 --- a/crabfit-frontend/src/pages/Privacy/Privacy.tsx +++ b/crabfit-frontend/src/pages/Privacy/Privacy.tsx @@ -83,7 +83,7 @@ const Privacy = () => { -
+
From 2c43a8e0d257fabf6f9e8354c9d8d42cfa838666 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Sat, 5 Jun 2021 23:40:23 +1000 Subject: [PATCH 3/6] Better dark mode colors --- crabfit-frontend/src/App.tsx | 8 ++++---- .../src/components/Button/buttonStyle.ts | 20 +++++++++++++++---- .../CalendarField/calendarFieldStyle.ts | 8 +++----- .../src/components/Donate/Donate.tsx | 1 + .../src/components/Error/errorStyle.ts | 9 +++++---- .../src/components/Recents/recentsStyle.ts | 2 +- .../SelectField/selectFieldStyle.ts | 8 ++++---- .../components/TextField/textFieldStyle.ts | 8 ++++---- .../TimeRangeField/timeRangeFieldStyle.ts | 2 +- .../ToggleField/toggleFieldStyle.ts | 13 +++++++----- crabfit-frontend/src/pages/Home/homeStyle.ts | 4 ++-- crabfit-frontend/src/theme/index.ts | 4 ++-- 12 files changed, 51 insertions(+), 36 deletions(-) diff --git a/crabfit-frontend/src/App.tsx b/crabfit-frontend/src/App.tsx index 743c72f..dd97904 100644 --- a/crabfit-frontend/src/App.tsx +++ b/crabfit-frontend/src/App.tsx @@ -97,17 +97,17 @@ const App = () => { borderRadius: 100, border: `4px solid ${theme.primaryBackground}`, width: 12, - background: `${theme.primaryLight}AA`, + background: `${theme.mode === 'light' ? theme.primaryLight : theme.primaryDark}AA`, }, '*::-webkit-scrollbar-thumb:hover': { - background: `${theme.primaryLight}CC`, + background: `${theme.mode === 'light' ? theme.primaryLight : theme.primaryDark}CC`, }, '*::-webkit-scrollbar-thumb:active': { - background: `${theme.primaryLight}`, + background: `${theme.mode === 'light' ? theme.primaryLight : theme.primaryDark}`, }, })} /> - + }> diff --git a/crabfit-frontend/src/components/Button/buttonStyle.ts b/crabfit-frontend/src/components/Button/buttonStyle.ts index 7779d1d..8cce43f 100644 --- a/crabfit-frontend/src/components/Button/buttonStyle.ts +++ b/crabfit-frontend/src/components/Button/buttonStyle.ts @@ -12,10 +12,9 @@ export const Pressable = styled.button` font: inherit; box-sizing: border-box; background: ${props => props.primaryColor || props.theme.primary}; - color: #FFF; + color: ${props => props.primaryColor ? '#FFF' : props.theme.background}; font-weight: 600; - text-shadow: 0 -1px .5px ${props => props.secondaryColor || props.theme.primaryDark}; - transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), background 150ms cubic-bezier(0, 0, 0.58, 1); + transition: transform 150ms cubic-bezier(0, 0, 0.58, 1); border-radius: 3px; padding: ${props => props.small ? '.4em 1.3em' : '.6em 1.5em'}; transform-style: preserve-3d; @@ -55,7 +54,6 @@ export const Pressable = styled.button` } ${props => props.isLoading && ` - text-shadow: none; color: transparent; cursor: wait; @@ -103,4 +101,18 @@ export const Pressable = styled.button` } } `} + + ${props => props.alt && ` + background: transparent; + border: 1px solid ${props.primaryColor || props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; + color: ${props.primaryColor || props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; + margin-bottom: 0; + + &::before { + content: none; + } + &:hover, &:active { + transform: none; + } + `} `; diff --git a/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts b/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts index 055e0a8..7dcee99 100644 --- a/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts +++ b/crabfit-frontend/src/components/CalendarField/calendarFieldStyle.ts @@ -78,7 +78,7 @@ export const Date = styled.button` } background-color: ${props => props.theme.primaryBackground}; - border: 1px solid ${props => props.theme.primaryLight}; + border: 1px solid ${props => props.theme.primary}; display: flex; align-items: center; justify-content: center; @@ -87,20 +87,18 @@ export const Date = styled.button` touch-action: none; ${props => props.otherMonth && ` - color: ${props.theme.primaryLight}; + color: ${props.theme.mode === 'light' ? props.theme.primaryLight : props.theme.primaryDark}; `} ${props => props.isToday && ` font-weight: 900; - color: ${props.theme.primaryDark}; + color: ${props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; `} ${props => (props.selected || (props.mode === 'add' && props.selecting)) && ` color: ${props.otherMonth ? 'rgba(255,255,255,.5)' : '#FFF'}; background-color: ${props.theme.primary}; - border-color: ${props.theme.primary}; `} ${props => props.mode === 'remove' && props.selecting && ` background-color: ${props.theme.primaryBackground}; - border: 1px solid ${props.theme.primaryLight}; color: ${props.isToday ? props.theme.primaryDark : (props.otherMonth ? props.theme.primaryLight : 'inherit')}; `} `; diff --git a/crabfit-frontend/src/components/Donate/Donate.tsx b/crabfit-frontend/src/components/Donate/Donate.tsx index 0933612..69d352d 100644 --- a/crabfit-frontend/src/components/Donate/Donate.tsx +++ b/crabfit-frontend/src/components/Donate/Donate.tsx @@ -118,6 +118,7 @@ const Donate = () => { target="_blank" rel="noreferrer" ref={buttonRef} + style={{ whiteSpace: 'nowrap' }} >{t('donate.button')} props.theme.error}; color: #FFFFFF; - padding: 12px 16px; + padding: 0 16px; display: flex; align-items: center; justify-content: space-between; @@ -13,16 +13,17 @@ export const Wrapper = styled.div` max-height: 0; margin: 0; visibility: hidden; - transition: margin .2s, max-height .2s; + transition: margin .2s, padding .2s, max-height .2s; ${props => props.open && ` opacity: 1; visibility: visible; margin: 20px 0; + padding: 12px 16px; max-height: 60px; - transition: opacity .15s .2s, max-height .2s, margin .2s, visibility .2s; + transition: opacity .15s .2s, max-height .2s, margin .2s, padding .2s, visibility .2s; `} - + @media (prefers-reduced-motion: reduce) { transition: none; } diff --git a/crabfit-frontend/src/components/Recents/recentsStyle.ts b/crabfit-frontend/src/components/Recents/recentsStyle.ts index ee60d92..5b4ca72 100644 --- a/crabfit-frontend/src/components/Recents/recentsStyle.ts +++ b/crabfit-frontend/src/components/Recents/recentsStyle.ts @@ -12,7 +12,7 @@ export const Recent = styled.a` & .name { font-weight: 700; font-size: 1.1em; - color: ${props => props.theme.primaryDark}; + color: ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; flex: 1; display: block; } diff --git a/crabfit-frontend/src/components/SelectField/selectFieldStyle.ts b/crabfit-frontend/src/components/SelectField/selectFieldStyle.ts index 7d0197d..2383a85 100644 --- a/crabfit-frontend/src/components/SelectField/selectFieldStyle.ts +++ b/crabfit-frontend/src/components/SelectField/selectFieldStyle.ts @@ -38,8 +38,8 @@ export const StyledSelect = styled.select` background: ${props => props.theme.primaryBackground}; color: inherit; padding: 10px 14px; - border: 1px solid ${props => props.theme.primaryLight}; - box-shadow: inset 0 0 0 0 ${props => props.theme.primaryLight}; + border: 1px solid ${props => props.theme.primary}; + box-shadow: inset 0 0 0 0 ${props => props.theme.primary}; border-radius: 3px; outline: none; transition: border-color .15s, box-shadow .15s; @@ -50,8 +50,8 @@ export const StyledSelect = styled.select` background-size: 1em; &:focus { - border: 1px solid ${props => props.theme.primary}; - box-shadow: inset 0 -3px 0 0 ${props => props.theme.primary}; + border: 1px solid ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; + box-shadow: inset 0 -3px 0 0 ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; } ${props => props.small && ` diff --git a/crabfit-frontend/src/components/TextField/textFieldStyle.ts b/crabfit-frontend/src/components/TextField/textFieldStyle.ts index 1405e3d..de2bc5f 100644 --- a/crabfit-frontend/src/components/TextField/textFieldStyle.ts +++ b/crabfit-frontend/src/components/TextField/textFieldStyle.ts @@ -32,15 +32,15 @@ export const StyledInput = styled.input` background: ${props => props.theme.primaryBackground}; color: inherit; padding: 10px 14px; - border: 1px solid ${props => props.theme.primaryLight}; - box-shadow: inset 0 0 0 0 ${props => props.theme.primaryLight}; + border: 1px solid ${props => props.theme.primary}; + box-shadow: inset 0 0 0 0 ${props => props.theme.primary}; border-radius: 3px; font-size: 18px; outline: none; transition: border-color .15s, box-shadow .15s; &:focus { - border: 1px solid ${props => props.theme.primary}; - box-shadow: inset 0 -3px 0 0 ${props => props.theme.primary}; + border: 1px solid ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; + box-shadow: inset 0 -3px 0 0 ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; } `; diff --git a/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts b/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts index 6706c23..447d4dc 100644 --- a/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts +++ b/crabfit-frontend/src/components/TimeRangeField/timeRangeFieldStyle.ts @@ -20,7 +20,7 @@ export const StyledSubLabel = styled.label` export const Range = styled.div` user-select: none; background-color: ${props => props.theme.primaryBackground}; - border: 1px solid ${props => props.theme.primaryLight}; + border: 1px solid ${props => props.theme.primary}; border-radius: 3px; height: 50px; position: relative; diff --git a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts index 7b2e9d8..6575d2f 100644 --- a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts +++ b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts @@ -9,9 +9,14 @@ export const ToggleContainer = styled.div` border: 1px solid ${props => props.theme.primary}; border-radius: 3px; overflow: hidden; + --focus-color: ${props => props.theme.primary}; - &:focus-within label { - box-shadow: inset 0 -3px 0 0 var(--focus-color); + &:focus-within { + --focus-color: ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; + border: 1px solid var(--focus-color); + & label { + box-shadow: inset 0 -3px 0 0 var(--focus-color); + } } & > div:first-of-type label { @@ -41,8 +46,7 @@ export const HiddenInput = styled.input` &:checked + label { color: ${props => props.theme.background}; - background-color: ${props => props.theme.primary}; - --focus-color: ${props => props.theme.primaryDark}; + background-color: var(--focus-color); } `; @@ -57,5 +61,4 @@ export const LabelButton = styled.label` align-items: center; justify-content: center; transition: box-shadow .15s; - --focus-color: ${props => props.theme.primary}; `; diff --git a/crabfit-frontend/src/pages/Home/homeStyle.ts b/crabfit-frontend/src/pages/Home/homeStyle.ts index 16e1f89..2a205e7 100644 --- a/crabfit-frontend/src/pages/Home/homeStyle.ts +++ b/crabfit-frontend/src/pages/Home/homeStyle.ts @@ -17,7 +17,7 @@ export const TitleSmall = styled.span` text-align: center; font-family: 'Samurai Bob', sans-serif; font-weight: 400; - color: ${props => props.theme.primaryDark}; + color: ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; line-height: 1em; text-transform: uppercase; @@ -113,7 +113,7 @@ export const Stat = styled.div` export const StatNumber = styled.span` display: block; font-weight: 900; - color: ${props => props.theme.primaryDark}; + color: ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; font-size: 2em; `; diff --git a/crabfit-frontend/src/theme/index.ts b/crabfit-frontend/src/theme/index.ts index 9746b65..b102ecc 100644 --- a/crabfit-frontend/src/theme/index.ts +++ b/crabfit-frontend/src/theme/index.ts @@ -15,8 +15,8 @@ const theme = { background: '#111111', text: '#DDDDDD', primary: '#F79E00', - primaryDark: '#F4BB60', - primaryLight: '#F48600', + primaryDark: '#CC7313', + primaryLight: '#F4BB60', primaryBackground: '#30240F', error: '#E53935', loading: '#444444', From 77277c8c3e0b697d50804801952395d54ef848f4 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Sun, 6 Jun 2021 20:58:56 +1000 Subject: [PATCH 4/6] Update react-hook-form, focus login on tab press --- crabfit-frontend/package.json | 2 +- crabfit-frontend/public/i18n/en/home.json | 9 ++- .../availabilityViewerStyle.ts | 2 +- .../src/components/Button/Button.tsx | 9 ++- .../src/components/Button/buttonStyle.ts | 12 +++- .../CalendarField/CalendarField.tsx | 18 +++--- .../src/components/Donate/Donate.tsx | 2 - .../src/components/Error/Error.tsx | 2 +- .../GoogleCalendar/GoogleCalendar.tsx | 10 ++-- .../GoogleCalendar/googleCalendarStyle.ts | 11 ---- .../src/components/Legend/legendStyle.ts | 2 +- .../OutlookCalendar/OutlookCalendar.tsx | 10 ++-- .../src/components/Recents/recentsStyle.ts | 2 +- .../components/SelectField/SelectField.tsx | 10 ++-- .../src/components/TextField/TextField.tsx | 10 ++-- .../TimeRangeField/TimeRangeField.tsx | 14 +++-- .../ToggleField/toggleFieldStyle.ts | 5 +- crabfit-frontend/src/pages/Create/Create.tsx | 16 +++-- crabfit-frontend/src/pages/Event/Event.tsx | 12 ++-- .../src/pages/Event/eventStyle.ts | 2 +- crabfit-frontend/src/pages/Home/Home.tsx | 58 +++++++++++++------ crabfit-frontend/src/pages/Home/homeStyle.ts | 13 +++++ crabfit-frontend/src/utils/index.ts | 31 ++++++++++ crabfit-frontend/yarn.lock | 8 +-- 24 files changed, 169 insertions(+), 101 deletions(-) create mode 100644 crabfit-frontend/src/utils/index.ts diff --git a/crabfit-frontend/package.json b/crabfit-frontend/package.json index 0ce5dd3..4e2cfe0 100644 --- a/crabfit-frontend/package.json +++ b/crabfit-frontend/package.json @@ -22,7 +22,7 @@ "i18next-http-backend": "^1.2.4", "react": "^17.0.2", "react-dom": "^17.0.2", - "react-hook-form": "^6.15.4", + "react-hook-form": "^7.8.1", "react-i18next": "^11.8.15", "react-router-dom": "^5.2.0", "react-scripts": "4.0.3", diff --git a/crabfit-frontend/public/i18n/en/home.json b/crabfit-frontend/public/i18n/en/home.json index fce306a..98db888 100644 --- a/crabfit-frontend/public/i18n/en/home.json +++ b/crabfit-frontend/public/i18n/en/home.json @@ -48,10 +48,13 @@ "availabilities": "Availabilities entered", "content": { "p1": "Crab Fit helps you fit your event around everyone's schedules. Simply create an event above and send the link to everyone that is participating. Results update live and you will be able to see a heat-map of when everyone is free.<1/><2>Learn more about how to Crab Fit.", - "p2": "Create a lot of Crab Fits? Get the <1>Chrome extension or <3>Firefox extension for your browser! You can also download the <5>Android app to Crab Fit on the go.", "p3": "Created by <1>Ben Grant, Crab Fit is the modern-day solution to your group event planning debates.", "p4": "The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the <1>repository. By using Crab Fit you agree to the <3>privacy policy.", - "p5": "Consider donating below if it helped you out so it can stay free for everyone. 🦀" - } + "p5": "Consider donating below if it helped you out so Crab Fit can stay free for everyone. 🦀" + }, + "chrome_extension": "Get the Chrome Extension", + "firefox_extension": "Get the Firefox Extension", + "safari_extension": "Get the Safari Extension", + "android_app": "Download the Android app" } } diff --git a/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts b/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts index c499db6..330b3cc 100644 --- a/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts +++ b/crabfit-frontend/src/components/AvailabilityViewer/availabilityViewerStyle.ts @@ -206,7 +206,7 @@ export const Person = styled.button` font: inherit; font-size: 15px; border-radius: 3px; - border: 2px solid ${props => props.theme.text}; + border: 1px solid ${props => props.theme.text}; color: ${props => props.theme.text}; font-weight: 500; background: transparent; diff --git a/crabfit-frontend/src/components/Button/Button.tsx b/crabfit-frontend/src/components/Button/Button.tsx index b17ee4e..19c40b7 100644 --- a/crabfit-frontend/src/components/Button/Button.tsx +++ b/crabfit-frontend/src/components/Button/Button.tsx @@ -1,13 +1,16 @@ import { Pressable } from './buttonStyle'; -const Button = ({ href, type = 'button', ...props }) => ( +const Button = ({ href, type = 'button', icon, children, ...props }) => ( + > + {icon} + {children} + ); export default Button; diff --git a/crabfit-frontend/src/components/Button/buttonStyle.ts b/crabfit-frontend/src/components/Button/buttonStyle.ts index 8cce43f..766769a 100644 --- a/crabfit-frontend/src/components/Button/buttonStyle.ts +++ b/crabfit-frontend/src/components/Button/buttonStyle.ts @@ -20,6 +20,12 @@ export const Pressable = styled.button` transform-style: preserve-3d; margin-bottom: 5px; + & svg, & img { + height: 1.2em; + width: 1.2em; + margin-right: .5em; + } + ${props => props.size && ` padding: 0; height: ${props.size}; @@ -39,7 +45,7 @@ export const Pressable = styled.button` transition: transform 150ms cubic-bezier(0, 0, 0.58, 1), box-shadow 150ms cubic-bezier(0, 0, 0.58, 1); } - &:hover { + &:hover, &:focus { transform: translate(0, 1px); &::before { transform: translate3d(0, 4px, -1em); @@ -102,7 +108,7 @@ export const Pressable = styled.button` } `} - ${props => props.alt && ` + ${props => props.secondary && ` background: transparent; border: 1px solid ${props.primaryColor || props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; color: ${props.primaryColor || props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; @@ -111,7 +117,7 @@ export const Pressable = styled.button` &::before { content: none; } - &:hover, &:active { + &:hover, &:active, &:focus { transform: none; } `} diff --git a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx index 5957d0a..1927aa6 100644 --- a/crabfit-frontend/src/components/CalendarField/CalendarField.tsx +++ b/crabfit-frontend/src/components/CalendarField/CalendarField.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useRef } from 'react'; +import { useState, useEffect, useRef, forwardRef } from 'react'; import { useTranslation } from 'react-i18next'; import dayjs from 'dayjs'; import isToday from 'dayjs/plugin/isToday'; @@ -47,13 +47,13 @@ const calculateMonth = (month, year, weekStart) => { return dates; }; -const CalendarField = ({ +const CalendarField = forwardRef(({ label, subLabel, id, - register, + setValue, ...props -}) => { +}, ref) => { const weekStart = useSettingsStore(state => state.weekStart); const locale = useLocaleUpdateStore(state => state.locale); const { t } = useTranslation('home'); @@ -88,6 +88,8 @@ const CalendarField = ({ _setMode(newMode); }; + useEffect(() => setValue(props.name, type ? JSON.stringify(selectedDays) : JSON.stringify(selectedDates)), [type, selectedDays, selectedDates, setValue, props.name]); + useEffect(() => { if (dayjs.Ls.hasOwnProperty(locale) && weekStart !== dayjs.Ls[locale].weekStart) { dayjs.updateLocale(locale, { weekStart }); @@ -102,7 +104,7 @@ const CalendarField = ({ @@ -211,8 +213,8 @@ const CalendarField = ({ {(weekStart ? [...dayjs.weekdaysShort().filter((_,i) => i !== 0), dayjs.weekdaysShort()[0]] : dayjs.weekdaysShort()).map((name, i) => i !== 0), dayjs.weekdaysShort()[0]] : dayjs.weekdaysShort())[dayjs().day()-weekStart] === name} - title={(weekStart ? [...dayjs.weekdaysShort().filter((_,i) => i !== 0), dayjs.weekdaysShort()[0]] : dayjs.weekdaysShort())[dayjs().day()-weekStart] === name ? t('form.dates.tooltips.today') : ''} + isToday={(weekStart ? [...dayjs.weekdaysShort().filter((_,i) => i !== 0), dayjs.weekdaysShort()[0]] : dayjs.weekdaysShort())[dayjs().day()-weekStart === -1 ? 6 : dayjs().day()-weekStart] === name} + title={(weekStart ? [...dayjs.weekdaysShort().filter((_,i) => i !== 0), dayjs.weekdaysShort()[0]] : dayjs.weekdaysShort())[dayjs().day()-weekStart === -1 ? 6 : dayjs().day()-weekStart] === name ? t('form.dates.tooltips.today') : ''} selected={selectedDays.includes(((i + weekStart) % 7 + 7) % 7)} selecting={selectingDays.includes(((i + weekStart) % 7 + 7) % 7)} mode={mode} @@ -257,6 +259,6 @@ const CalendarField = ({ )} ); -}; +}); export default CalendarField; diff --git a/crabfit-frontend/src/components/Donate/Donate.tsx b/crabfit-frontend/src/components/Donate/Donate.tsx index 69d352d..05581a5 100644 --- a/crabfit-frontend/src/components/Donate/Donate.tsx +++ b/crabfit-frontend/src/components/Donate/Donate.tsx @@ -18,7 +18,6 @@ const Donate = () => { const { t } = useTranslation('common'); const firstLinkRef = useRef(); - const buttonRef = useRef(); const modalRef = useRef(); const [isOpen, _setIsOpen] = useState(false); @@ -117,7 +116,6 @@ const Donate = () => { href="https://www.paypal.com/donate?business=N89X6YXRT5HKW&item_name=Crab+Fit+Donation¤cy_code=AUD&amount=5" target="_blank" rel="noreferrer" - ref={buttonRef} style={{ whiteSpace: 'nowrap' }} >{t('donate.button')} diff --git a/crabfit-frontend/src/components/Error/Error.tsx b/crabfit-frontend/src/components/Error/Error.tsx index 6cf8770..0d51039 100644 --- a/crabfit-frontend/src/components/Error/Error.tsx +++ b/crabfit-frontend/src/components/Error/Error.tsx @@ -6,7 +6,7 @@ const Error = ({ open = true, ...props }) => ( - + {children} diff --git a/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx b/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx index 2ec5bf0..a210359 100644 --- a/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx +++ b/crabfit-frontend/src/components/GoogleCalendar/GoogleCalendar.tsx @@ -5,7 +5,6 @@ import { useTranslation } from 'react-i18next'; import { Button, Center } from 'components'; import { Loader } from '../Loading/loadingStyle'; import { - LoginButton, CalendarList, CheckboxInput, CheckboxLabel, @@ -101,11 +100,10 @@ const GoogleCalendar = ({ timeZone, timeMin, timeMax, onImport }) => { onClick={() => signIn()} isLoading={signedIn === undefined} primaryColor="#4286F5" - secondaryColor="#3367BD"> - - - {t('event:you.google_cal.login')} - + secondaryColor="#3367BD" + icon={} + > + {t('event:you.google_cal.login')} ) : ( diff --git a/crabfit-frontend/src/components/GoogleCalendar/googleCalendarStyle.ts b/crabfit-frontend/src/components/GoogleCalendar/googleCalendarStyle.ts index 2afc26f..ca7c0f8 100644 --- a/crabfit-frontend/src/components/GoogleCalendar/googleCalendarStyle.ts +++ b/crabfit-frontend/src/components/GoogleCalendar/googleCalendarStyle.ts @@ -1,16 +1,5 @@ import styled from '@emotion/styled'; -export const LoginButton = styled.div` - display: flex; - align-items: center; - justify-content: center; - - & img { - height: 1em; - margin-right: .8em; - } -`; - export const CalendarList = styled.div` width: 100%; & > div { diff --git a/crabfit-frontend/src/components/Legend/legendStyle.ts b/crabfit-frontend/src/components/Legend/legendStyle.ts index 1542359..7ca7f67 100644 --- a/crabfit-frontend/src/components/Legend/legendStyle.ts +++ b/crabfit-frontend/src/components/Legend/legendStyle.ts @@ -28,7 +28,7 @@ export const Bar = styled.div` border-radius: 3px; overflow: hidden; margin: 0 8px; - border: 2px solid ${props => props.theme.text}; + border: 1px solid ${props => props.theme.text}; @media (max-width: 400px) { width: 100%; diff --git a/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx b/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx index 2edcf88..c2eeae5 100644 --- a/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx +++ b/crabfit-frontend/src/components/OutlookCalendar/OutlookCalendar.tsx @@ -6,7 +6,6 @@ import { useTranslation } from 'react-i18next'; import { Button, Center } from 'components'; import { Loader } from '../Loading/loadingStyle'; import { - LoginButton, CalendarList, CheckboxInput, CheckboxLabel, @@ -168,11 +167,10 @@ const OutlookCalendar = ({ timeZone, timeMin, timeMax, onImport }) => { onClick={() => signIn()} isLoading={client === undefined} primaryColor="#0364B9" - secondaryColor="#02437D"> - - - {t('event:you.outlook_cal')} - + secondaryColor="#02437D" + icon={} + > + {t('event:you.outlook_cal')} ) : ( diff --git a/crabfit-frontend/src/components/Recents/recentsStyle.ts b/crabfit-frontend/src/components/Recents/recentsStyle.ts index 5b4ca72..4d1e465 100644 --- a/crabfit-frontend/src/components/Recents/recentsStyle.ts +++ b/crabfit-frontend/src/components/Recents/recentsStyle.ts @@ -2,7 +2,6 @@ import styled from '@emotion/styled'; export const Recent = styled.a` text-decoration: none; - color: inherit; display: flex; align-items: center; justify-content: space-between; @@ -20,6 +19,7 @@ export const Recent = styled.a` font-weight: 400; opacity: .8; white-space: nowrap; + color: ${props => props.theme.text}; } &:hover .name { diff --git a/crabfit-frontend/src/components/SelectField/SelectField.tsx b/crabfit-frontend/src/components/SelectField/SelectField.tsx index f6ff1c1..8771c72 100644 --- a/crabfit-frontend/src/components/SelectField/SelectField.tsx +++ b/crabfit-frontend/src/components/SelectField/SelectField.tsx @@ -1,3 +1,4 @@ +import { forwardRef } from 'react'; import { Wrapper, StyledLabel, @@ -5,7 +6,7 @@ import { StyledSelect, } from './selectFieldStyle'; -const SelectField = ({ +const SelectField = forwardRef(({ label, subLabel, id, @@ -13,17 +14,16 @@ const SelectField = ({ inline = false, small = false, defaultOption, - register, ...props -}) => ( +}, ref) => ( {label && {label}} {subLabel && {subLabel}} {defaultOption && } @@ -38,6 +38,6 @@ const SelectField = ({ )} -); +)); export default SelectField; diff --git a/crabfit-frontend/src/components/TextField/TextField.tsx b/crabfit-frontend/src/components/TextField/TextField.tsx index 97602b5..e096583 100644 --- a/crabfit-frontend/src/components/TextField/TextField.tsx +++ b/crabfit-frontend/src/components/TextField/TextField.tsx @@ -1,3 +1,4 @@ +import { forwardRef } from 'react'; import { Wrapper, StyledLabel, @@ -5,19 +6,18 @@ import { StyledInput, } from './textFieldStyle'; -const TextField = ({ +const TextField = forwardRef(({ label, subLabel, id, inline = false, - register, ...props -}) => ( +}, ref) => ( {label && {label}} {subLabel && {subLabel}} - + -); +)); export default TextField; diff --git a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx index 8493e73..c45e429 100644 --- a/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx +++ b/crabfit-frontend/src/components/TimeRangeField/TimeRangeField.tsx @@ -1,4 +1,4 @@ -import { useState, useEffect, useRef } from 'react'; +import { useState, useEffect, useRef, forwardRef } from 'react'; import dayjs from 'dayjs'; import { useSettingsStore, useLocaleUpdateStore } from 'stores'; @@ -14,13 +14,13 @@ import { const times = ['00','01','02','03','04','05','06','07','08','09','10','11','12','13','14','15','16','17','18','19','20','21','22','23','24']; -const TimeRangeField = ({ +const TimeRangeField = forwardRef(({ label, subLabel, id, - register, + setValue, ...props -}) => { +}, ref) => { const timeFormat = useSettingsStore(state => state.timeFormat); const locale = useLocaleUpdateStore(state => state.locale); @@ -38,6 +38,8 @@ const TimeRangeField = ({ } }, [rangeRef]); + useEffect(() => setValue(props.name, JSON.stringify({start, end})), [start, end, setValue, props.name]); + const handleMouseMove = e => { if (isStartMoving.current || isEndMoving.current) { let step = Math.round(((e.pageX - rangeRect.current.left) / rangeRect.current.width) * 24); @@ -60,8 +62,8 @@ const TimeRangeField = ({ @@ -139,6 +141,6 @@ const TimeRangeField = ({ ); -}; +}); export default TimeRangeField; diff --git a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts index 6575d2f..f7a11f8 100644 --- a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts +++ b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts @@ -35,14 +35,17 @@ export const StyledLabel = styled.label` export const Option = styled.div` flex: 1; + position: relative; `; export const HiddenInput = styled.input` height: 0; width: 0; position: absolute; - left: -1000px; + top: 0; + left: 0; opacity: 0; + appearance: none; &:checked + label { color: ${props => props.theme.background}; diff --git a/crabfit-frontend/src/pages/Create/Create.tsx b/crabfit-frontend/src/pages/Create/Create.tsx index 4f7d239..e7430ac 100644 --- a/crabfit-frontend/src/pages/Create/Create.tsx +++ b/crabfit-frontend/src/pages/Create/Create.tsx @@ -39,7 +39,7 @@ dayjs.extend(timezone); dayjs.extend(customParseFormat); const Create = ({ offline }) => { - const { register, handleSubmit } = useForm({ + const { register, handleSubmit, setValue } = useForm({ defaultValues: { timezone: Intl.DateTimeFormat().resolvedOptions().timeZone, }, @@ -196,36 +196,34 @@ const Create = ({ offline }) => { label={t('home:form.name.label')} subLabel={t('home:form.name.sublabel')} type="text" - name="name" id="name" - register={register} + {...register('name')} /> diff --git a/crabfit-frontend/src/pages/Event/Event.tsx b/crabfit-frontend/src/pages/Event/Event.tsx index 39e2bf3..5f4ce82 100644 --- a/crabfit-frontend/src/pages/Event/Event.tsx +++ b/crabfit-frontend/src/pages/Event/Event.tsx @@ -51,7 +51,7 @@ const Event = (props) => { const { t } = useTranslation(['common', 'event']); - const { register, handleSubmit } = useForm(); + const { register, handleSubmit, setFocus } = useForm(); const { id } = props.match.params; const { offline } = props; const [timezone, setTimezone] = useState(Intl.DateTimeFormat().resolvedOptions().timeZone); @@ -329,20 +329,18 @@ const Event = (props) => { + )} + + +

Created by Ben Grant, Crab Fit is the modern-day solution to your group event planning debates.

The code for Crab Fit is open source, if you find any issues or want to contribute, you can visit the repository. By using Crab Fit you agree to the privacy policy.

Consider donating below if it helped you out so it can stay free for everyone. 🦀

diff --git a/crabfit-frontend/src/pages/Home/homeStyle.ts b/crabfit-frontend/src/pages/Home/homeStyle.ts index 2a205e7..70ca3dc 100644 --- a/crabfit-frontend/src/pages/Home/homeStyle.ts +++ b/crabfit-frontend/src/pages/Home/homeStyle.ts @@ -89,6 +89,10 @@ export const AboutSection = styled.section` margin: 30px 0 0; background-color: ${props => props.theme.primaryBackground}; padding: 20px 0; + + & a { + color: ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; + } `; export const P = styled.p` @@ -125,3 +129,12 @@ export const OfflineMessage = styled.div` text-align: center; margin: 50px 0 20px; `; + +export const ButtonArea = styled.div` + display: flex; + flex-wrap: wrap; + align-items: center; + justify-content: center; + gap: 12px; + margin: 30px 0; +`; diff --git a/crabfit-frontend/src/utils/index.ts b/crabfit-frontend/src/utils/index.ts new file mode 100644 index 0000000..701605a --- /dev/null +++ b/crabfit-frontend/src/utils/index.ts @@ -0,0 +1,31 @@ +export const detect_browser = () => { + // Opera 8.0+ + const isOpera = (!!window.opr && !!opr.addons) || !!window.opera || navigator.userAgent.indexOf(' OPR/') >= 0; + + // Firefox 1.0+ + const isFirefox = typeof InstallTrigger !== 'undefined'; + + // Safari 3.0+ "[object HTMLElementConstructor]" + const isSafari = /constructor/i.test(window.HTMLElement) || (function (p) { return p.toString() === "[object SafariRemoteNotification]"; })(!window['safari'] || (typeof safari !== 'undefined' && window['safari'].pushNotification)); + + // Internet Explorer 6-11 + const isIE = /*@cc_on!@*/false || !!document.documentMode; + + // Edge 20+ + const isEdge = !isIE && !!window.StyleMedia; + + // Chrome 1 - 79 + const isChrome = !!window.chrome; + + // Edge (based on chromium) detection + // eslint-disable-next-line + const isEdgeChromium = isChrome && (navigator.userAgent.indexOf("Edg") != -1); + + if (isEdgeChromium) return 'edge_chromium'; + if (isChrome) return 'chrome'; + if (isEdge) return 'edge'; + if (isIE) return 'ie'; + if (isSafari) return 'safari'; + if (isFirefox) return 'firefox'; + if (isOpera) return 'opera'; +}; diff --git a/crabfit-frontend/yarn.lock b/crabfit-frontend/yarn.lock index e7c363a..0a065f8 100644 --- a/crabfit-frontend/yarn.lock +++ b/crabfit-frontend/yarn.lock @@ -9232,10 +9232,10 @@ react-error-overlay@^6.0.9: resolved "https://registry.yarnpkg.com/react-error-overlay/-/react-error-overlay-6.0.9.tgz#3c743010c9359608c375ecd6bc76f35d93995b0a" integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew== -react-hook-form@^6.15.4: - version "6.15.4" - resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-6.15.4.tgz#328003e1ccc096cd158899ffe7e3b33735a9b024" - integrity sha512-K+Sw33DtTMengs8OdqFJI3glzNl1wBzSefD/ksQw/hJf9CnOHQAU6qy82eOrh0IRNt2G53sjr7qnnw1JDjvx1w== +react-hook-form@^7.8.1: + version "7.8.1" + resolved "https://registry.yarnpkg.com/react-hook-form/-/react-hook-form-7.8.1.tgz#291609c50778bf8bc94e5d4c586e9ee5c6dd512f" + integrity sha512-pwWxd4UfwsKVh/W2YE2Hnu7KBY4KTCZq3QO1PMISzP31AZ5Kmv6ji085QVIHVWVSLT4oX6IhmZ2bWJ2oBIwobQ== react-i18next@^11.8.15: version "11.8.15" From dd6fe446d8ee265744803d15b961d17cfccefe61 Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Sun, 6 Jun 2021 21:14:32 +1000 Subject: [PATCH 5/6] Style fixes, and english privacy policy --- crabfit-frontend/public/i18n/de/privacy.json | 52 ------------------- crabfit-frontend/public/i18n/en/privacy.json | 2 +- crabfit-frontend/public/i18n/es/privacy.json | 52 ------------------- crabfit-frontend/public/i18n/fr/privacy.json | 52 ------------------- crabfit-frontend/public/i18n/hi/privacy.json | 52 ------------------- crabfit-frontend/public/i18n/id/privacy.json | 52 ------------------- crabfit-frontend/public/i18n/ja/privacy.json | 52 ------------------- crabfit-frontend/public/i18n/ko/privacy.json | 3 -- crabfit-frontend/public/i18n/ru/privacy.json | 52 ------------------- .../components/ToggleField/ToggleField.tsx | 2 +- .../ToggleField/toggleFieldStyle.ts | 6 +++ crabfit-frontend/src/pages/Help/helpStyle.ts | 13 +++-- crabfit-frontend/src/pages/Home/Home.tsx | 2 + .../src/pages/Privacy/Privacy.tsx | 4 +- 14 files changed, 22 insertions(+), 374 deletions(-) delete mode 100644 crabfit-frontend/public/i18n/de/privacy.json delete mode 100644 crabfit-frontend/public/i18n/es/privacy.json delete mode 100644 crabfit-frontend/public/i18n/fr/privacy.json delete mode 100644 crabfit-frontend/public/i18n/hi/privacy.json delete mode 100644 crabfit-frontend/public/i18n/id/privacy.json delete mode 100644 crabfit-frontend/public/i18n/ja/privacy.json delete mode 100644 crabfit-frontend/public/i18n/ko/privacy.json delete mode 100644 crabfit-frontend/public/i18n/ru/privacy.json diff --git a/crabfit-frontend/public/i18n/de/privacy.json b/crabfit-frontend/public/i18n/de/privacy.json deleted file mode 100644 index 0f7f917..0000000 --- a/crabfit-frontend/public/i18n/de/privacy.json +++ /dev/null @@ -1,52 +0,0 @@ -{ - "name": "Privacy Policy", - - "p1": "This SERVICE is provided by Benjamin Grant at no cost and is intended for use as is.", - "p2": "This page is used to inform visitors regarding the policies of the collection, use, and disclosure of Personal Information if using the Service.", - "p3": "If you choose to use the Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that is collected is used for providing and improving the Service. Your information will not be used or shared with anyone except as described in this Privacy Policy.", - - "h1": "Information Collection and Use", - - "p4": "The Service uses third party services that may collect information used to identify you.", - "p5": "Links to privacy policies of the third party service providers used by the Service:", - "link": "Google Play Services", - - "h2": "Log Data", - - "p6": "When you use the Service, in the case of an error, data and information is collected to improve the Service, which may include your IP address, device name, operating system version, app configuration and the time and date of the error.", - - "h3": "Cookies", - - "p7": "Cookies are files with a small amount of data that are commonly used as anonymous unique identifiers. These are sent to your browser from the websites that you visit and are stored on your device's internal memory.", - "p8": "Cookies are used by Google Analytics to track you across the web and provide anonymous statistics to improve the Service.", - - "h4": "Service Providers", - - "p9": "Third-party companies may be employed for the following reasons:", - "l1": "To facilitate the Service", - "l2": "To provide the Service on our behalf", - "l3": "To perform Service-related services", - "l4": "To assist in analyzing how the Service is used", - "p10": "To perform these tasks, the third parties may have access to your Personal Information, but are obligated not to disclose or use this information for any purpose except the above.", - - "h5": "Security", - - "p11": "Personal Information that is shared via the Service is protected, however remember that no method of transmission over the internet, or method of electronic storage is 100% secure and reliable, so take care when sharing Personal Information.", - - "h6": "Links to Other Sites", - - "p12": "The Service may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note that these external sites are not operated by the Service. Therefore, you are advised to review the Privacy Policy of these websites.", - - "h7": "Children's Privacy", - - "p13": "The Service does not address anyone under the age of 13. Personally identifiable information is not knowingly collected from children under 13. If discovered that a child under 13 has provided the Service with personal information, such information will be immediately deleted from the servers. If you are a parent or guardian and you are aware that your child has provided the Service with personal information, please <1>contact us so that this information can be removed.", - - "h8": "Changes to This Privacy Policy", - - "p14": "This Privacy Policy may be updated from time to time. Thus, you are advised to review this page periodically for any changes.", - "p15": "This policy is effective as of 2021-04-20", - - "h9": "Contact Us", - - "p16": "If you have any questions or suggestions about the Privacy Policy, do not hesitate to contact us at <1>benjamin.grantGRA0007+crabfit@gmail.com." -} diff --git a/crabfit-frontend/public/i18n/en/privacy.json b/crabfit-frontend/public/i18n/en/privacy.json index 0f7f917..a83ae48 100644 --- a/crabfit-frontend/public/i18n/en/privacy.json +++ b/crabfit-frontend/public/i18n/en/privacy.json @@ -48,5 +48,5 @@ "h9": "Contact Us", - "p16": "If you have any questions or suggestions about the Privacy Policy, do not hesitate to contact us at <1>benjamin.grantGRA0007+crabfit@gmail.com." + "p16": "If you have any questions or suggestions about the Privacy Policy, do not hesitate to contact us at <1>crabfit@bengrant.dev." } diff --git a/crabfit-frontend/public/i18n/es/privacy.json b/crabfit-frontend/public/i18n/es/privacy.json deleted file mode 100644 index 0f7f917..0000000 --- a/crabfit-frontend/public/i18n/es/privacy.json +++ /dev/null @@ -1,52 +0,0 @@ -{ - "name": "Privacy Policy", - - "p1": "This SERVICE is provided by Benjamin Grant at no cost and is intended for use as is.", - "p2": "This page is used to inform visitors regarding the policies of the collection, use, and disclosure of Personal Information if using the Service.", - "p3": "If you choose to use the Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that is collected is used for providing and improving the Service. Your information will not be used or shared with anyone except as described in this Privacy Policy.", - - "h1": "Information Collection and Use", - - "p4": "The Service uses third party services that may collect information used to identify you.", - "p5": "Links to privacy policies of the third party service providers used by the Service:", - "link": "Google Play Services", - - "h2": "Log Data", - - "p6": "When you use the Service, in the case of an error, data and information is collected to improve the Service, which may include your IP address, device name, operating system version, app configuration and the time and date of the error.", - - "h3": "Cookies", - - "p7": "Cookies are files with a small amount of data that are commonly used as anonymous unique identifiers. These are sent to your browser from the websites that you visit and are stored on your device's internal memory.", - "p8": "Cookies are used by Google Analytics to track you across the web and provide anonymous statistics to improve the Service.", - - "h4": "Service Providers", - - "p9": "Third-party companies may be employed for the following reasons:", - "l1": "To facilitate the Service", - "l2": "To provide the Service on our behalf", - "l3": "To perform Service-related services", - "l4": "To assist in analyzing how the Service is used", - "p10": "To perform these tasks, the third parties may have access to your Personal Information, but are obligated not to disclose or use this information for any purpose except the above.", - - "h5": "Security", - - "p11": "Personal Information that is shared via the Service is protected, however remember that no method of transmission over the internet, or method of electronic storage is 100% secure and reliable, so take care when sharing Personal Information.", - - "h6": "Links to Other Sites", - - "p12": "The Service may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note that these external sites are not operated by the Service. Therefore, you are advised to review the Privacy Policy of these websites.", - - "h7": "Children's Privacy", - - "p13": "The Service does not address anyone under the age of 13. Personally identifiable information is not knowingly collected from children under 13. If discovered that a child under 13 has provided the Service with personal information, such information will be immediately deleted from the servers. If you are a parent or guardian and you are aware that your child has provided the Service with personal information, please <1>contact us so that this information can be removed.", - - "h8": "Changes to This Privacy Policy", - - "p14": "This Privacy Policy may be updated from time to time. Thus, you are advised to review this page periodically for any changes.", - "p15": "This policy is effective as of 2021-04-20", - - "h9": "Contact Us", - - "p16": "If you have any questions or suggestions about the Privacy Policy, do not hesitate to contact us at <1>benjamin.grantGRA0007+crabfit@gmail.com." -} diff --git a/crabfit-frontend/public/i18n/fr/privacy.json b/crabfit-frontend/public/i18n/fr/privacy.json deleted file mode 100644 index 0f7f917..0000000 --- a/crabfit-frontend/public/i18n/fr/privacy.json +++ /dev/null @@ -1,52 +0,0 @@ -{ - "name": "Privacy Policy", - - "p1": "This SERVICE is provided by Benjamin Grant at no cost and is intended for use as is.", - "p2": "This page is used to inform visitors regarding the policies of the collection, use, and disclosure of Personal Information if using the Service.", - "p3": "If you choose to use the Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that is collected is used for providing and improving the Service. Your information will not be used or shared with anyone except as described in this Privacy Policy.", - - "h1": "Information Collection and Use", - - "p4": "The Service uses third party services that may collect information used to identify you.", - "p5": "Links to privacy policies of the third party service providers used by the Service:", - "link": "Google Play Services", - - "h2": "Log Data", - - "p6": "When you use the Service, in the case of an error, data and information is collected to improve the Service, which may include your IP address, device name, operating system version, app configuration and the time and date of the error.", - - "h3": "Cookies", - - "p7": "Cookies are files with a small amount of data that are commonly used as anonymous unique identifiers. These are sent to your browser from the websites that you visit and are stored on your device's internal memory.", - "p8": "Cookies are used by Google Analytics to track you across the web and provide anonymous statistics to improve the Service.", - - "h4": "Service Providers", - - "p9": "Third-party companies may be employed for the following reasons:", - "l1": "To facilitate the Service", - "l2": "To provide the Service on our behalf", - "l3": "To perform Service-related services", - "l4": "To assist in analyzing how the Service is used", - "p10": "To perform these tasks, the third parties may have access to your Personal Information, but are obligated not to disclose or use this information for any purpose except the above.", - - "h5": "Security", - - "p11": "Personal Information that is shared via the Service is protected, however remember that no method of transmission over the internet, or method of electronic storage is 100% secure and reliable, so take care when sharing Personal Information.", - - "h6": "Links to Other Sites", - - "p12": "The Service may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note that these external sites are not operated by the Service. Therefore, you are advised to review the Privacy Policy of these websites.", - - "h7": "Children's Privacy", - - "p13": "The Service does not address anyone under the age of 13. Personally identifiable information is not knowingly collected from children under 13. If discovered that a child under 13 has provided the Service with personal information, such information will be immediately deleted from the servers. If you are a parent or guardian and you are aware that your child has provided the Service with personal information, please <1>contact us so that this information can be removed.", - - "h8": "Changes to This Privacy Policy", - - "p14": "This Privacy Policy may be updated from time to time. Thus, you are advised to review this page periodically for any changes.", - "p15": "This policy is effective as of 2021-04-20", - - "h9": "Contact Us", - - "p16": "If you have any questions or suggestions about the Privacy Policy, do not hesitate to contact us at <1>benjamin.grantGRA0007+crabfit@gmail.com." -} diff --git a/crabfit-frontend/public/i18n/hi/privacy.json b/crabfit-frontend/public/i18n/hi/privacy.json deleted file mode 100644 index 0f7f917..0000000 --- a/crabfit-frontend/public/i18n/hi/privacy.json +++ /dev/null @@ -1,52 +0,0 @@ -{ - "name": "Privacy Policy", - - "p1": "This SERVICE is provided by Benjamin Grant at no cost and is intended for use as is.", - "p2": "This page is used to inform visitors regarding the policies of the collection, use, and disclosure of Personal Information if using the Service.", - "p3": "If you choose to use the Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that is collected is used for providing and improving the Service. Your information will not be used or shared with anyone except as described in this Privacy Policy.", - - "h1": "Information Collection and Use", - - "p4": "The Service uses third party services that may collect information used to identify you.", - "p5": "Links to privacy policies of the third party service providers used by the Service:", - "link": "Google Play Services", - - "h2": "Log Data", - - "p6": "When you use the Service, in the case of an error, data and information is collected to improve the Service, which may include your IP address, device name, operating system version, app configuration and the time and date of the error.", - - "h3": "Cookies", - - "p7": "Cookies are files with a small amount of data that are commonly used as anonymous unique identifiers. These are sent to your browser from the websites that you visit and are stored on your device's internal memory.", - "p8": "Cookies are used by Google Analytics to track you across the web and provide anonymous statistics to improve the Service.", - - "h4": "Service Providers", - - "p9": "Third-party companies may be employed for the following reasons:", - "l1": "To facilitate the Service", - "l2": "To provide the Service on our behalf", - "l3": "To perform Service-related services", - "l4": "To assist in analyzing how the Service is used", - "p10": "To perform these tasks, the third parties may have access to your Personal Information, but are obligated not to disclose or use this information for any purpose except the above.", - - "h5": "Security", - - "p11": "Personal Information that is shared via the Service is protected, however remember that no method of transmission over the internet, or method of electronic storage is 100% secure and reliable, so take care when sharing Personal Information.", - - "h6": "Links to Other Sites", - - "p12": "The Service may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note that these external sites are not operated by the Service. Therefore, you are advised to review the Privacy Policy of these websites.", - - "h7": "Children's Privacy", - - "p13": "The Service does not address anyone under the age of 13. Personally identifiable information is not knowingly collected from children under 13. If discovered that a child under 13 has provided the Service with personal information, such information will be immediately deleted from the servers. If you are a parent or guardian and you are aware that your child has provided the Service with personal information, please <1>contact us so that this information can be removed.", - - "h8": "Changes to This Privacy Policy", - - "p14": "This Privacy Policy may be updated from time to time. Thus, you are advised to review this page periodically for any changes.", - "p15": "This policy is effective as of 2021-04-20", - - "h9": "Contact Us", - - "p16": "If you have any questions or suggestions about the Privacy Policy, do not hesitate to contact us at <1>benjamin.grantGRA0007+crabfit@gmail.com." -} diff --git a/crabfit-frontend/public/i18n/id/privacy.json b/crabfit-frontend/public/i18n/id/privacy.json deleted file mode 100644 index 0f7f917..0000000 --- a/crabfit-frontend/public/i18n/id/privacy.json +++ /dev/null @@ -1,52 +0,0 @@ -{ - "name": "Privacy Policy", - - "p1": "This SERVICE is provided by Benjamin Grant at no cost and is intended for use as is.", - "p2": "This page is used to inform visitors regarding the policies of the collection, use, and disclosure of Personal Information if using the Service.", - "p3": "If you choose to use the Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that is collected is used for providing and improving the Service. Your information will not be used or shared with anyone except as described in this Privacy Policy.", - - "h1": "Information Collection and Use", - - "p4": "The Service uses third party services that may collect information used to identify you.", - "p5": "Links to privacy policies of the third party service providers used by the Service:", - "link": "Google Play Services", - - "h2": "Log Data", - - "p6": "When you use the Service, in the case of an error, data and information is collected to improve the Service, which may include your IP address, device name, operating system version, app configuration and the time and date of the error.", - - "h3": "Cookies", - - "p7": "Cookies are files with a small amount of data that are commonly used as anonymous unique identifiers. These are sent to your browser from the websites that you visit and are stored on your device's internal memory.", - "p8": "Cookies are used by Google Analytics to track you across the web and provide anonymous statistics to improve the Service.", - - "h4": "Service Providers", - - "p9": "Third-party companies may be employed for the following reasons:", - "l1": "To facilitate the Service", - "l2": "To provide the Service on our behalf", - "l3": "To perform Service-related services", - "l4": "To assist in analyzing how the Service is used", - "p10": "To perform these tasks, the third parties may have access to your Personal Information, but are obligated not to disclose or use this information for any purpose except the above.", - - "h5": "Security", - - "p11": "Personal Information that is shared via the Service is protected, however remember that no method of transmission over the internet, or method of electronic storage is 100% secure and reliable, so take care when sharing Personal Information.", - - "h6": "Links to Other Sites", - - "p12": "The Service may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note that these external sites are not operated by the Service. Therefore, you are advised to review the Privacy Policy of these websites.", - - "h7": "Children's Privacy", - - "p13": "The Service does not address anyone under the age of 13. Personally identifiable information is not knowingly collected from children under 13. If discovered that a child under 13 has provided the Service with personal information, such information will be immediately deleted from the servers. If you are a parent or guardian and you are aware that your child has provided the Service with personal information, please <1>contact us so that this information can be removed.", - - "h8": "Changes to This Privacy Policy", - - "p14": "This Privacy Policy may be updated from time to time. Thus, you are advised to review this page periodically for any changes.", - "p15": "This policy is effective as of 2021-04-20", - - "h9": "Contact Us", - - "p16": "If you have any questions or suggestions about the Privacy Policy, do not hesitate to contact us at <1>benjamin.grantGRA0007+crabfit@gmail.com." -} diff --git a/crabfit-frontend/public/i18n/ja/privacy.json b/crabfit-frontend/public/i18n/ja/privacy.json deleted file mode 100644 index 0f7f917..0000000 --- a/crabfit-frontend/public/i18n/ja/privacy.json +++ /dev/null @@ -1,52 +0,0 @@ -{ - "name": "Privacy Policy", - - "p1": "This SERVICE is provided by Benjamin Grant at no cost and is intended for use as is.", - "p2": "This page is used to inform visitors regarding the policies of the collection, use, and disclosure of Personal Information if using the Service.", - "p3": "If you choose to use the Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that is collected is used for providing and improving the Service. Your information will not be used or shared with anyone except as described in this Privacy Policy.", - - "h1": "Information Collection and Use", - - "p4": "The Service uses third party services that may collect information used to identify you.", - "p5": "Links to privacy policies of the third party service providers used by the Service:", - "link": "Google Play Services", - - "h2": "Log Data", - - "p6": "When you use the Service, in the case of an error, data and information is collected to improve the Service, which may include your IP address, device name, operating system version, app configuration and the time and date of the error.", - - "h3": "Cookies", - - "p7": "Cookies are files with a small amount of data that are commonly used as anonymous unique identifiers. These are sent to your browser from the websites that you visit and are stored on your device's internal memory.", - "p8": "Cookies are used by Google Analytics to track you across the web and provide anonymous statistics to improve the Service.", - - "h4": "Service Providers", - - "p9": "Third-party companies may be employed for the following reasons:", - "l1": "To facilitate the Service", - "l2": "To provide the Service on our behalf", - "l3": "To perform Service-related services", - "l4": "To assist in analyzing how the Service is used", - "p10": "To perform these tasks, the third parties may have access to your Personal Information, but are obligated not to disclose or use this information for any purpose except the above.", - - "h5": "Security", - - "p11": "Personal Information that is shared via the Service is protected, however remember that no method of transmission over the internet, or method of electronic storage is 100% secure and reliable, so take care when sharing Personal Information.", - - "h6": "Links to Other Sites", - - "p12": "The Service may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note that these external sites are not operated by the Service. Therefore, you are advised to review the Privacy Policy of these websites.", - - "h7": "Children's Privacy", - - "p13": "The Service does not address anyone under the age of 13. Personally identifiable information is not knowingly collected from children under 13. If discovered that a child under 13 has provided the Service with personal information, such information will be immediately deleted from the servers. If you are a parent or guardian and you are aware that your child has provided the Service with personal information, please <1>contact us so that this information can be removed.", - - "h8": "Changes to This Privacy Policy", - - "p14": "This Privacy Policy may be updated from time to time. Thus, you are advised to review this page periodically for any changes.", - "p15": "This policy is effective as of 2021-04-20", - - "h9": "Contact Us", - - "p16": "If you have any questions or suggestions about the Privacy Policy, do not hesitate to contact us at <1>benjamin.grantGRA0007+crabfit@gmail.com." -} diff --git a/crabfit-frontend/public/i18n/ko/privacy.json b/crabfit-frontend/public/i18n/ko/privacy.json deleted file mode 100644 index dd14d07..0000000 --- a/crabfit-frontend/public/i18n/ko/privacy.json +++ /dev/null @@ -1,3 +0,0 @@ -{ - "name": "개인 정보 보호 정책에" -} diff --git a/crabfit-frontend/public/i18n/ru/privacy.json b/crabfit-frontend/public/i18n/ru/privacy.json deleted file mode 100644 index 0f7f917..0000000 --- a/crabfit-frontend/public/i18n/ru/privacy.json +++ /dev/null @@ -1,52 +0,0 @@ -{ - "name": "Privacy Policy", - - "p1": "This SERVICE is provided by Benjamin Grant at no cost and is intended for use as is.", - "p2": "This page is used to inform visitors regarding the policies of the collection, use, and disclosure of Personal Information if using the Service.", - "p3": "If you choose to use the Service, then you agree to the collection and use of information in relation to this policy. The Personal Information that is collected is used for providing and improving the Service. Your information will not be used or shared with anyone except as described in this Privacy Policy.", - - "h1": "Information Collection and Use", - - "p4": "The Service uses third party services that may collect information used to identify you.", - "p5": "Links to privacy policies of the third party service providers used by the Service:", - "link": "Google Play Services", - - "h2": "Log Data", - - "p6": "When you use the Service, in the case of an error, data and information is collected to improve the Service, which may include your IP address, device name, operating system version, app configuration and the time and date of the error.", - - "h3": "Cookies", - - "p7": "Cookies are files with a small amount of data that are commonly used as anonymous unique identifiers. These are sent to your browser from the websites that you visit and are stored on your device's internal memory.", - "p8": "Cookies are used by Google Analytics to track you across the web and provide anonymous statistics to improve the Service.", - - "h4": "Service Providers", - - "p9": "Third-party companies may be employed for the following reasons:", - "l1": "To facilitate the Service", - "l2": "To provide the Service on our behalf", - "l3": "To perform Service-related services", - "l4": "To assist in analyzing how the Service is used", - "p10": "To perform these tasks, the third parties may have access to your Personal Information, but are obligated not to disclose or use this information for any purpose except the above.", - - "h5": "Security", - - "p11": "Personal Information that is shared via the Service is protected, however remember that no method of transmission over the internet, or method of electronic storage is 100% secure and reliable, so take care when sharing Personal Information.", - - "h6": "Links to Other Sites", - - "p12": "The Service may contain links to other sites. If you click on a third-party link, you will be directed to that site. Note that these external sites are not operated by the Service. Therefore, you are advised to review the Privacy Policy of these websites.", - - "h7": "Children's Privacy", - - "p13": "The Service does not address anyone under the age of 13. Personally identifiable information is not knowingly collected from children under 13. If discovered that a child under 13 has provided the Service with personal information, such information will be immediately deleted from the servers. If you are a parent or guardian and you are aware that your child has provided the Service with personal information, please <1>contact us so that this information can be removed.", - - "h8": "Changes to This Privacy Policy", - - "p14": "This Privacy Policy may be updated from time to time. Thus, you are advised to review this page periodically for any changes.", - "p15": "This policy is effective as of 2021-04-20", - - "h9": "Contact Us", - - "p16": "If you have any questions or suggestions about the Privacy Policy, do not hesitate to contact us at <1>benjamin.grantGRA0007+crabfit@gmail.com." -} diff --git a/crabfit-frontend/src/components/ToggleField/ToggleField.tsx b/crabfit-frontend/src/components/ToggleField/ToggleField.tsx index 2387faf..3e83a65 100644 --- a/crabfit-frontend/src/components/ToggleField/ToggleField.tsx +++ b/crabfit-frontend/src/components/ToggleField/ToggleField.tsx @@ -19,7 +19,7 @@ const ToggleField = ({ ...props }) => ( - {label && {label}} + {label && {label} {title !== '' && }} {Object.entries(options).map(([key, label]) => diff --git a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts index f7a11f8..6f4007c 100644 --- a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts +++ b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts @@ -31,6 +31,12 @@ export const StyledLabel = styled.label` display: block; padding-bottom: 4px; font-size: .9rem; + + & svg { + height: 1em; + width: 1em; + vertical-align: middle; + } `; export const Option = styled.div` diff --git a/crabfit-frontend/src/pages/Help/helpStyle.ts b/crabfit-frontend/src/pages/Help/helpStyle.ts index fc96326..f0f93b8 100644 --- a/crabfit-frontend/src/pages/Help/helpStyle.ts +++ b/crabfit-frontend/src/pages/Help/helpStyle.ts @@ -29,7 +29,7 @@ export const FakeCalendar = styled.div` } & .dates span { background-color: ${props => props.theme.primaryBackground}; - border: 1px solid ${props => props.theme.primaryLight}; + border: 1px solid ${props => props.theme.primary}; display: flex; align-items: center; justify-content: center; @@ -38,15 +38,22 @@ export const FakeCalendar = styled.div` &.selected { color: #FFF; background-color: ${props => props.theme.primary}; - border-color: ${props => props.theme.primary}; } } + & .dates span:first-of-type { + border-start-start-radius: 3px; + border-end-start-radius: 3px; + } + & .dates span:last-of-type { + border-end-end-radius: 3px; + border-start-end-radius: 3px; + } `; export const FakeTimeRange = styled.div` user-select: none; background-color: ${props => props.theme.primaryBackground}; - border: 1px solid ${props => props.theme.primaryLight}; + border: 1px solid ${props => props.theme.primary}; border-radius: 3px; height: 50px; position: relative; diff --git a/crabfit-frontend/src/pages/Home/Home.tsx b/crabfit-frontend/src/pages/Home/Home.tsx index 2e3f606..59c7dee 100644 --- a/crabfit-frontend/src/pages/Home/Home.tsx +++ b/crabfit-frontend/src/pages/Home/Home.tsx @@ -243,6 +243,7 @@ const Home = ({ offline }) => { firefox: , }[browser]} target="_blank" + rel="noreferrer" secondary >{{ chrome: t('home:about.chrome_extension'), @@ -253,6 +254,7 @@ const Home = ({ offline }) => { href="https://play.google.com/store/apps/details?id=fit.crab" icon={} target="_blank" + rel="noreferrer" secondary >{t('home:about.android_app')} diff --git a/crabfit-frontend/src/pages/Privacy/Privacy.tsx b/crabfit-frontend/src/pages/Privacy/Privacy.tsx index b3af673..3025cd6 100644 --- a/crabfit-frontend/src/pages/Privacy/Privacy.tsx +++ b/crabfit-frontend/src/pages/Privacy/Privacy.tsx @@ -71,14 +71,14 @@ const Privacy = () => {

{t('privacy:p12')}

{t('privacy:h7')}

-

The Service does not address anyone under the age of 13. Personally identifiable information is not knowingly collected from children under 13. If discovered that a child under 13 has provided the Service with personal information, such information will be immediately deleted from the servers. If you are a parent or guardian and you are aware that your child has provided the Service with personal information, please contact us so that this information can be removed.

+

The Service does not address anyone under the age of 13. Personally identifiable information is not knowingly collected from children under 13. If discovered that a child under 13 has provided the Service with personal information, such information will be immediately deleted from the servers. If you are a parent or guardian and you are aware that your child has provided the Service with personal information, please contact us so that this information can be removed.

{t('privacy:h8')}

{t('privacy:p14')}

{t('privacy:p15')}

{t('privacy:h9')}

-

If you have any questions or suggestions about the Privacy Policy, do not hesitate to contact us at benjamin.grantGRA0007+crabfit@gmail.com.

+

If you have any questions or suggestions about the Privacy Policy, do not hesitate to contact us at crabfit@bengrant.dev.

From f395ad17a2f5f978d4c95f5ba915de7dbda8b1ef Mon Sep 17 00:00:00 2001 From: Ben Grant Date: Sun, 6 Jun 2021 21:21:18 +1000 Subject: [PATCH 6/6] Minor style fixes --- crabfit-frontend/src/components/Logo/logoStyle.ts | 2 +- .../src/components/ToggleField/toggleFieldStyle.ts | 3 ++- crabfit-frontend/src/pages/Event/eventStyle.ts | 2 +- 3 files changed, 4 insertions(+), 3 deletions(-) diff --git a/crabfit-frontend/src/components/Logo/logoStyle.ts b/crabfit-frontend/src/components/Logo/logoStyle.ts index 5edeace..d9b13da 100644 --- a/crabfit-frontend/src/components/Logo/logoStyle.ts +++ b/crabfit-frontend/src/components/Logo/logoStyle.ts @@ -58,7 +58,7 @@ export const Title = styled.span` export const Tagline = styled.span` text-decoration: underline; font-size: 14px; - padding-top: 6px; + padding-top: 2px; display: flex; align-items: center; justify-content: center; diff --git a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts index 6f4007c..f2b7e0e 100644 --- a/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts +++ b/crabfit-frontend/src/components/ToggleField/toggleFieldStyle.ts @@ -10,6 +10,7 @@ export const ToggleContainer = styled.div` border-radius: 3px; overflow: hidden; --focus-color: ${props => props.theme.primary}; + transition: border .15s; &:focus-within { --focus-color: ${props => props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; @@ -69,5 +70,5 @@ export const LabelButton = styled.label` box-sizing: border-box; align-items: center; justify-content: center; - transition: box-shadow .15s; + transition: box-shadow .15s, background-color .15s; `; diff --git a/crabfit-frontend/src/pages/Event/eventStyle.ts b/crabfit-frontend/src/pages/Event/eventStyle.ts index 2ca35b1..9a87bcc 100644 --- a/crabfit-frontend/src/pages/Event/eventStyle.ts +++ b/crabfit-frontend/src/pages/Event/eventStyle.ts @@ -90,7 +90,7 @@ export const ShareInfo = styled.p` cursor: pointer; &:hover { - color: ${props.theme.primaryDark}; + color: ${props.theme.mode === 'light' ? props.theme.primaryDark : props.theme.primaryLight}; } `} `;