From adf7b9f3d6a7d4d2a43066d1499200406ab8f577 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 7 May 2022 12:23:56 -0500 Subject: [PATCH 01/14] Use settings.svg and mail.svg from Tabler --- app/icons/cog.svg | 1 - app/icons/mail.svg | 1 - app/soapbox/components/sidebar-navigation.tsx | 4 ++-- 3 files changed, 2 insertions(+), 4 deletions(-) delete mode 100644 app/icons/cog.svg delete mode 100644 app/icons/mail.svg diff --git a/app/icons/cog.svg b/app/icons/cog.svg deleted file mode 100644 index 5601b5489d..0000000000 --- a/app/icons/cog.svg +++ /dev/null @@ -1 +0,0 @@ - diff --git a/app/icons/mail.svg b/app/icons/mail.svg deleted file mode 100644 index 808c585797..0000000000 --- a/app/icons/mail.svg +++ /dev/null @@ -1 +0,0 @@ - \ No newline at end of file diff --git a/app/soapbox/components/sidebar-navigation.tsx b/app/soapbox/components/sidebar-navigation.tsx index 3ce3b9e289..c87b7ba07b 100644 --- a/app/soapbox/components/sidebar-navigation.tsx +++ b/app/soapbox/components/sidebar-navigation.tsx @@ -123,7 +123,7 @@ const SidebarNavigation = () => { return ( } /> ); @@ -158,7 +158,7 @@ const SidebarNavigation = () => { } /> From 575bc834f5b20d1e29530fb9663fc9eef7b8bf54 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 7 May 2022 12:46:21 -0500 Subject: [PATCH 02/14] StillImage: convert to TSX --- app/soapbox/components/still_image.js | Bin 1629 -> 0 bytes app/soapbox/components/still_image.tsx | 46 +++++++++++++++++++++++++ 2 files changed, 46 insertions(+) delete mode 100644 app/soapbox/components/still_image.js create mode 100644 app/soapbox/components/still_image.tsx diff --git a/app/soapbox/components/still_image.js b/app/soapbox/components/still_image.js deleted file mode 100644 index 323960a37a0714884103f7764d0f203a824d842a..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 1629 zcmZux!EW0y487+oxJzXNu`}$L#>IdhwgJOXv;}%rY$efPOP<8EDO~^iNZE0eq=sSG z(aXq4w7yLAopk=YWe;{ZtBuBDo_Vhrt%O}$shJk-CNSqD1*?=C?^iBOJF4jWec(cU9!d{OoHbg z9jP%NTyY&I$lBUE*Zxuc+iQ|^z)pRQ$&9Vk;P$SJ9Yd5W5|8h-ig9-Rm)gh_J;^gw zF$#24KPp6st8|X0k-X~z9kcE1t8&ytYE_bsats~r;vUX{vZwJV0C(EwETO**0y%|y zXM+3Y2EIfs1^Q0tSk7H}(YQ-QzSSF%!p8^WNoVPB^sH;UUW$|^fa(loD!iBGRg%UV z3S07I4Mm0w%HU&1d?F0Oa6n%i(9M?6dP47{scIDt{I;?pAJsp_&>KiXoHKon0s$`< zEy2JUaP-R5d=0)S!6@Ac5t7f}bcH)ks@dj7l8mx`VbcX{r}TD*=eVE2b^)ZFy0->t z4-)aM5@}vJ`4%cnD8wAT(j5e5iAR|oHAlJY*4H>c{ij0r>A|D<=@1MhM_N&~*Ybt& z1sEqL8Rc44`V}gPGDGE2SB0QwU1yq?IwNM3+9)SZ=@i|xX+D`==MWzhbLh?tS=Q2w zXVzpPO|gteANsT($}751Wq&tj2e9HU)3}nyl|BC}ijE#V)v+nMP$m5ykCWGfH9SwF m=VHowSe%HvSTEX@)i^R|yweWwQSKUFs|9H`5FHn$pZy0+Xb-&r diff --git a/app/soapbox/components/still_image.tsx b/app/soapbox/components/still_image.tsx new file mode 100644 index 0000000000..d2ee256a39 --- /dev/null +++ b/app/soapbox/components/still_image.tsx @@ -0,0 +1,46 @@ +import classNames from 'classnames'; +import React, { useRef } from 'react'; + +import { useSettings } from 'soapbox/hooks'; + +interface IStillImage { + /** Image alt text. */ + alt?: string, + /** Extra class names for the outer
container. */ + className?: string, + /** URL to the image */ + src: string, + /** Extra CSS styles on the outer
element. */ + style?: React.CSSProperties, +} + +/** Renders images on a canvas, only playing GIFs if autoPlayGif is enabled. */ +const StillImage: React.FC = ({ alt, className, src, style }) => { + const settings = useSettings(); + const autoPlayGif = settings.get('autoPlayGif'); + + const canvas = useRef(null); + const img = useRef(null); + + const hoverToPlay = ( + src && !autoPlayGif && (src.endsWith('.gif') || src.startsWith('blob:')) + ); + + const handleImageLoad = () => { + if (hoverToPlay && canvas.current && img.current) { + canvas.current.width = img.current.naturalWidth; + canvas.current.height = img.current.naturalHeight; + canvas.current.getContext('2d')?.drawImage(img.current, 0, 0); + } + }; + + + return ( +
+ {alt} + {hoverToPlay && } +
+ ); +}; + +export default StillImage; From 84839a51044660fe2dd05a2d9fda481ac0d51dc1 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 7 May 2022 12:56:52 -0500 Subject: [PATCH 03/14] Convert legacy Avatar component to TSX --- app/soapbox/components/avatar.js | Bin 948 -> 0 bytes app/soapbox/components/avatar.tsx | 38 ++++++++++++++++++++++++++++++ 2 files changed, 38 insertions(+) delete mode 100644 app/soapbox/components/avatar.js create mode 100644 app/soapbox/components/avatar.tsx diff --git a/app/soapbox/components/avatar.js b/app/soapbox/components/avatar.js deleted file mode 100644 index d5000264d03a27332663f4e47c67209767d1e611..0000000000000000000000000000000000000000 GIT binary patch literal 0 HcmV?d00001 literal 948 zcmZWn%Wm5+5WMRvCO`q%fFF0KN>Q|zT$-TGttc9rTG=cpQXp5UQ$hb;l6tv~E|hkM zvoo_&bz>bvYT^ACQIkjIY>hk>Of2NLnHoTk&Nff4&5UWn_m*Q}!F(kldE{{MeQDj- zb<5(Y>3^Pt+p4L(jl2`>H2WJXt?z4bqLJKN(H!k%FKrNK$gto0i211^C``@hlB|_f ziB^vm@$p5laG(p5DLsSS~^x;So~W*6;yu?d%*$>&i{S zdG&`5n62(iTOY}dJ$}{yH0|*hNgkT>Dz0yPcFLS0pbyRf7u1tmtw&MP8qeq^aT~k-pM0NOpt`E#Zs=#km^7(-0cU|oE&EA0#oS#)FUyA$y$AM(quZVJsso{vQPyY#Y- KTkEr|&;9~*1~7R5 diff --git a/app/soapbox/components/avatar.tsx b/app/soapbox/components/avatar.tsx new file mode 100644 index 0000000000..9d4fbaa7c3 --- /dev/null +++ b/app/soapbox/components/avatar.tsx @@ -0,0 +1,38 @@ +import classNames from 'classnames'; +import React from 'react'; + +import StillImage from 'soapbox/components/still_image'; + +import type { Account } from 'soapbox/types/entities'; + +interface IAvatar { + account?: Account | null, + size?: number, + className?: string, +} + +/** + * Legacy avatar component. + * @see soapbox/components/ui/avatar/avatar.tsx + * @deprecated + */ +const Avatar: React.FC = ({ account, size, className }) => { + if (!account) return null; + + // : TODO : remove inline and change all avatars to be sized using css + const style: React.CSSProperties = !size ? {} : { + width: `${size}px`, + height: `${size}px`, + }; + + return ( + + ); +}; + +export default Avatar; From 939c74fe44efdbd13806791c0268a5600ab0b17a Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 7 May 2022 12:58:12 -0500 Subject: [PATCH 04/14] UI Avatar: add overflow-hidden className --- app/soapbox/components/ui/avatar/avatar.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/app/soapbox/components/ui/avatar/avatar.tsx b/app/soapbox/components/ui/avatar/avatar.tsx index 6818509e86..1b02c6d25d 100644 --- a/app/soapbox/components/ui/avatar/avatar.tsx +++ b/app/soapbox/components/ui/avatar/avatar.tsx @@ -25,7 +25,7 @@ const Avatar = (props: IAvatar) => { return ( Date: Sat, 7 May 2022 13:37:24 -0500 Subject: [PATCH 05/14] Fix avatar test --- app/soapbox/components/__tests__/avatar.test.js | Bin 918 -> 949 bytes 1 file changed, 0 insertions(+), 0 deletions(-) diff --git a/app/soapbox/components/__tests__/avatar.test.js b/app/soapbox/components/__tests__/avatar.test.js index 6b50083edf59ecd02e5eec1608a46a0a130e8691..55abca520fb64fb3692942425d979dbe524b6782 100644 GIT binary patch delta 76 zcmbQnzLkBVimFateo<~>PG(iAV{&qSXi_@% delta 57 zcmdnWK8;-^Gq)hWs6?S!A+0Ds*DF||7R*pk&&24 From 4d79c1b3fee71a968d9d7ea44a8b3a1a05bb3080 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 7 May 2022 14:54:37 -0500 Subject: [PATCH 06/14] Simplify gradient colors Remove bg-color-1, bg-color-2, prefer values from gradient-blue and gradient-purple --- .../ui/components/background_shapes.tsx | 4 ++-- .../normalizers/soapbox/soapbox_config.ts | 6 ++---- tailwind.config.js | Bin 2312 -> 2256 bytes 3 files changed, 4 insertions(+), 6 deletions(-) diff --git a/app/soapbox/features/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx index bc4e3694c5..2f77d4e9c2 100644 --- a/app/soapbox/features/ui/components/background_shapes.tsx +++ b/app/soapbox/features/ui/components/background_shapes.tsx @@ -25,8 +25,8 @@ const BackgroundShapes: React.FC = ({ position = 'fixed' }) = - - + + diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts index aad2a13daf..9bc0fddeaf 100644 --- a/app/soapbox/normalizers/soapbox/soapbox_config.ts +++ b/app/soapbox/normalizers/soapbox/soapbox_config.ts @@ -52,8 +52,6 @@ const DEFAULT_COLORS = ImmutableMap({ 800: '#991b1b', 900: '#7f1d1d', }), - 'gradient-purple': '#b8a3f9', - 'gradient-blue': '#9bd5ff', 'sea-blue': '#2feecc', }); @@ -158,8 +156,8 @@ const maybeAddMissingColors = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMa const colors = soapboxConfig.get('colors'); const missing = ImmutableMap({ - 'bg-shape-1': colors.getIn(['accent', '500']), - 'bg-shape-2': colors.getIn(['primary', '500']), + 'gradient-purple': colors.getIn(['accent', '300']), + 'gradient-blue': colors.getIn(['primary', '300']), }); return soapboxConfig.set('colors', missing.mergeDeep(colors)); diff --git a/tailwind.config.js b/tailwind.config.js index 70278445b3e4c341fa69af7220625cde7090831e..0b9c1526a1fdb96984821f7d6a71ff7d0d8e7ee4 100644 GIT binary patch delta 12 TcmeAWx*)hgopp0O>q=$-9Qgzr delta 54 wcmca0*deq*omEpoK|Lv5w>TrQAXV2;-AbXPs5DiFO92WHaz>jaSa&c30H4DS+yDRo From 02616fc312eaf8c254b82b9945ad99345de8500d Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 7 May 2022 15:02:00 -0500 Subject: [PATCH 07/14] Tweak gradient colors --- app/soapbox/components/list.tsx | 4 ++-- app/soapbox/features/ui/components/background_shapes.tsx | 4 ++-- app/soapbox/normalizers/soapbox/soapbox_config.ts | 4 ++-- 3 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx index 3adc81c38f..862bf14563 100644 --- a/app/soapbox/components/list.tsx +++ b/app/soapbox/components/list.tsx @@ -37,8 +37,8 @@ const ListItem: React.FC = ({ label, hint, children, onClick }) => { return ( diff --git a/app/soapbox/features/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx index 2f77d4e9c2..eb97386dd0 100644 --- a/app/soapbox/features/ui/components/background_shapes.tsx +++ b/app/soapbox/features/ui/components/background_shapes.tsx @@ -25,8 +25,8 @@ const BackgroundShapes: React.FC = ({ position = 'fixed' }) = - - + + diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts index 9bc0fddeaf..76d1bfdd93 100644 --- a/app/soapbox/normalizers/soapbox/soapbox_config.ts +++ b/app/soapbox/normalizers/soapbox/soapbox_config.ts @@ -156,8 +156,8 @@ const maybeAddMissingColors = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMa const colors = soapboxConfig.get('colors'); const missing = ImmutableMap({ - 'gradient-purple': colors.getIn(['accent', '300']), - 'gradient-blue': colors.getIn(['primary', '300']), + 'gradient-purple': colors.getIn(['primary', '500']), + 'gradient-blue': colors.getIn(['accent', '500']), }); return soapboxConfig.set('colors', missing.mergeDeep(colors)); From e0701bd4432768f2b8e7a6595e376a48935f6f60 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 7 May 2022 15:21:23 -0500 Subject: [PATCH 08/14] BackgroundShapes: actually, set element opacity instead of color opacity to reduce banding --- app/soapbox/features/ui/components/background_shapes.tsx | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/app/soapbox/features/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx index eb97386dd0..85b0d4cb08 100644 --- a/app/soapbox/features/ui/components/background_shapes.tsx +++ b/app/soapbox/features/ui/components/background_shapes.tsx @@ -25,8 +25,8 @@ const BackgroundShapes: React.FC = ({ position = 'fixed' }) = - - + + From 4d5f1d236d19f3660005312a83314a2b2949d894 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 7 May 2022 15:23:43 -0500 Subject: [PATCH 09/14] gradient-purple, gradient-blue --> gradient-start, gradient-end --- app/soapbox/components/list.tsx | 4 ++-- .../ui/components/background_shapes.tsx | 4 ++-- .../normalizers/soapbox/soapbox_config.ts | 4 ++-- tailwind.config.js | Bin 2256 -> 2254 bytes tailwind/__tests__/colors-test.js | Bin 1903 -> 1899 bytes 5 files changed, 6 insertions(+), 6 deletions(-) diff --git a/app/soapbox/components/list.tsx b/app/soapbox/components/list.tsx index 862bf14563..e7d858334e 100644 --- a/app/soapbox/components/list.tsx +++ b/app/soapbox/components/list.tsx @@ -37,8 +37,8 @@ const ListItem: React.FC = ({ label, hint, children, onClick }) => { return ( diff --git a/app/soapbox/features/ui/components/background_shapes.tsx b/app/soapbox/features/ui/components/background_shapes.tsx index 85b0d4cb08..2f9427ebaf 100644 --- a/app/soapbox/features/ui/components/background_shapes.tsx +++ b/app/soapbox/features/ui/components/background_shapes.tsx @@ -25,8 +25,8 @@ const BackgroundShapes: React.FC = ({ position = 'fixed' }) = - - + + diff --git a/app/soapbox/normalizers/soapbox/soapbox_config.ts b/app/soapbox/normalizers/soapbox/soapbox_config.ts index 76d1bfdd93..cab8dc44c5 100644 --- a/app/soapbox/normalizers/soapbox/soapbox_config.ts +++ b/app/soapbox/normalizers/soapbox/soapbox_config.ts @@ -156,8 +156,8 @@ const maybeAddMissingColors = (soapboxConfig: SoapboxConfigMap): SoapboxConfigMa const colors = soapboxConfig.get('colors'); const missing = ImmutableMap({ - 'gradient-purple': colors.getIn(['primary', '500']), - 'gradient-blue': colors.getIn(['accent', '500']), + 'gradient-start': colors.getIn(['primary', '500']), + 'gradient-end': colors.getIn(['accent', '500']), }); return soapboxConfig.set('colors', missing.mergeDeep(colors)); diff --git a/tailwind.config.js b/tailwind.config.js index 0b9c1526a1fdb96984821f7d6a71ff7d0d8e7ee4..0aa665e2e89377dd3456d75e0a202c9db6b190f3 100644 GIT binary patch delta 26 icmca0cusJ`O%~STlEk8t$@f{LnN#ypHveO}#0&tHA_~?3 delta 27 jcmX>nctLQ(O%}F-(xQT#)XDc)q$dlp3UB6SJSRMUNtUFX($vYmY=>ZCBJ4IY5NS;XeFXzOb4_(kYc2(a IS|AC+0R9FO>i_@% From 45f95bd533fddb230f814ba327bdf817a75efabd Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 7 May 2022 15:45:29 -0500 Subject: [PATCH 10/14] Use gradient colors on PublicLayout --- app/soapbox/features/landing_page/index.tsx | 2 +- .../public_layout/components/sonar.tsx | 2 +- app/soapbox/features/public_layout/index.js | Bin 2240 -> 2249 bytes 3 files changed, 2 insertions(+), 2 deletions(-) diff --git a/app/soapbox/features/landing_page/index.tsx b/app/soapbox/features/landing_page/index.tsx index a33b9e8710..226438d039 100644 --- a/app/soapbox/features/landing_page/index.tsx +++ b/app/soapbox/features/landing_page/index.tsx @@ -72,7 +72,7 @@ const LandingPage = () => {
-

+

{instance.title}

diff --git a/app/soapbox/features/public_layout/components/sonar.tsx b/app/soapbox/features/public_layout/components/sonar.tsx index 62c50a42dc..f6a8ce21e9 100644 --- a/app/soapbox/features/public_layout/components/sonar.tsx +++ b/app/soapbox/features/public_layout/components/sonar.tsx @@ -8,7 +8,7 @@ const Sonar = () => (
-
+
); diff --git a/app/soapbox/features/public_layout/index.js b/app/soapbox/features/public_layout/index.js index a96e269e39f6f75c9dbff421e99a66423a0255cf..fa62567aab2d41f3fc375f0845db0d338ab6431e 100644 GIT binary patch delta 42 ycmX>gcv5h~78cp`qQsQU)Vvbi)VvgZLj#4B#G-7gl6>9boWzpU%_mrXFarQqFc1;| delta 33 mcmX>pctCK&78a4@%EUZfQv-#R#G-7gl6+kdfAd9_AIt#Jv<#mB From 7d3a0a8ab94608582bfdce66391cac2e7e7b77a1 Mon Sep 17 00:00:00 2001 From: Alex Gleason Date: Sat, 7 May 2022 15:52:01 -0500 Subject: [PATCH 11/14] Break out LandingGradient into its own component --- app/soapbox/components/landing-gradient.tsx | 8 ++++++++ app/soapbox/features/auth_layout/index.tsx | 3 ++- .../features/onboarding/onboarding-wizard.tsx | 3 ++- app/soapbox/features/public_layout/index.js | Bin 2249 -> 2174 bytes .../features/verification/waitlist_page.js | Bin 2732 -> 2687 bytes 5 files changed, 12 insertions(+), 2 deletions(-) create mode 100644 app/soapbox/components/landing-gradient.tsx diff --git a/app/soapbox/components/landing-gradient.tsx b/app/soapbox/components/landing-gradient.tsx new file mode 100644 index 0000000000..53e500d285 --- /dev/null +++ b/app/soapbox/components/landing-gradient.tsx @@ -0,0 +1,8 @@ +import React from 'react'; + +/** Fullscreen gradient used as a backdrop to public pages. */ +const LandingGradient: React.FC = () => ( +
+); + +export default LandingGradient; diff --git a/app/soapbox/features/auth_layout/index.tsx b/app/soapbox/features/auth_layout/index.tsx index 7a0d39c717..adc436f6c1 100644 --- a/app/soapbox/features/auth_layout/index.tsx +++ b/app/soapbox/features/auth_layout/index.tsx @@ -1,6 +1,7 @@ import React from 'react'; import { Link, Redirect, Route, Switch } from 'react-router-dom'; +import LandingGradient from 'soapbox/components/landing-gradient'; import SvgIcon from 'soapbox/components/ui/icon/svg-icon'; import BundleContainer from 'soapbox/features/ui/containers/bundle_container'; import { NotificationsContainer } from 'soapbox/features/ui/util/async-components'; @@ -20,7 +21,7 @@ const AuthLayout = () => { return (
-
+
diff --git a/app/soapbox/features/onboarding/onboarding-wizard.tsx b/app/soapbox/features/onboarding/onboarding-wizard.tsx index 0b530fd2a0..4087e4f035 100644 --- a/app/soapbox/features/onboarding/onboarding-wizard.tsx +++ b/app/soapbox/features/onboarding/onboarding-wizard.tsx @@ -4,6 +4,7 @@ import { useDispatch } from 'react-redux'; import ReactSwipeableViews from 'react-swipeable-views'; import { endOnboarding } from 'soapbox/actions/onboarding'; +import LandingGradient from 'soapbox/components/landing-gradient'; import { HStack } from 'soapbox/components/ui'; import AvatarSelectionStep from './steps/avatar-selection-step'; @@ -68,7 +69,7 @@ const OnboardingWizard = () => { return (
-
+
diff --git a/app/soapbox/features/public_layout/index.js b/app/soapbox/features/public_layout/index.js index fa62567aab2d41f3fc375f0845db0d338ab6431e..30c206838c9aa872fd36267dcbb02b201149851c 100644 GIT binary patch delta 98 zcmX>p_)lO1JENsfVqQvSUb=fxVoGLeUWr0lQGTw1dU1YYK~jE&esX?pL4F=kyjVX6 eqEI&-s&eCB8)jj2-THQ1ll57oHh*Ec$_xN6(V46f$&+lZ#SQ^AyT;(@Jx46q3?)(~A;QGE?(P zbW8GeONtcIit=-H3yLyx6N@T!O$`)M5{t5}z=Fj&i6yDJ<^~1|WtoY(sB0&mjW2rpc|ua$F=zg^9wcrjmaba delta 159 zcmew_vPN_R7vpAMMm?r_h2)&X;$pwV+*Dij4Bg`7qSVwpg>v1r(wrQHq;%c%qQsQU z)Vvbil6>8gB89Y~{9N6FqRiaHqDoy;1BH~tqHHU$U~x`jNvf{7fq_C9z_NLm6VfyN|PCg#EQ^1=jwlInJwr!&7`0{}o|HcS8j From 03381c8fb2b2bc19a23549270636f9f1e4a14554 Mon Sep 17 00:00:00 2001 From: Justin Date: Mon, 9 May 2022 08:55:53 -0400 Subject: [PATCH 12/14] Fix primary text on dark --- .../components/ui/button/useButtonStyles.ts | 2 +- app/soapbox/components/ui/text/text.tsx | 2 +- .../components/compose_form_button.tsx | 2 +- .../directory/components/account_card.js | Bin 3775 -> 3797 bytes .../notifications/components/notification.tsx | 2 +- .../steps/avatar-selection-step.tsx | 4 ++-- .../onboarding/steps/completed-step.tsx | 4 ++-- .../modals/report-modal/steps/reason-step.tsx | 2 +- .../features/verification/email_passthru.js | Bin 5845 -> 5867 bytes .../verification/steps/email-verification.js | Bin 4347 -> 4369 bytes app/styles/components/columns.scss | 2 +- app/styles/components/datepicker.scss | 2 +- app/styles/polls.scss | 2 +- app/styles/utilities.scss | 2 +- 14 files changed, 13 insertions(+), 13 deletions(-) diff --git a/app/soapbox/components/ui/button/useButtonStyles.ts b/app/soapbox/components/ui/button/useButtonStyles.ts index 2e92b33a65..b6ba9fb713 100644 --- a/app/soapbox/components/ui/button/useButtonStyles.ts +++ b/app/soapbox/components/ui/button/useButtonStyles.ts @@ -25,7 +25,7 @@ const useButtonStyles = ({ accent: 'border-transparent text-white bg-accent-500 hover:bg-accent-300 focus:ring-pink-500 focus:ring-2 focus:ring-offset-2', danger: 'border-transparent text-danger-700 bg-danger-100 hover:bg-danger-200 focus:ring-danger-500 focus:ring-2 focus:ring-offset-2', transparent: 'border-transparent text-gray-800 backdrop-blur-sm bg-white/75 hover:bg-white/80', - link: 'border-transparent text-primary-600 hover:bg-gray-100 hover:text-primary-700', + link: 'border-transparent text-primary-600 dark:text-primary-400 hover:bg-gray-100 hover:text-primary-700 dark:hover:bg-slate-900/50', }; const sizes = { diff --git a/app/soapbox/components/ui/text/text.tsx b/app/soapbox/components/ui/text/text.tsx index 9c7c8ddae2..5ecfadf39d 100644 --- a/app/soapbox/components/ui/text/text.tsx +++ b/app/soapbox/components/ui/text/text.tsx @@ -13,7 +13,7 @@ type Tags = 'abbr' | 'p' | 'span' | 'pre' | 'time' | 'h1' | 'h2' | 'h3' | 'h4' | const themes = { default: 'text-gray-900 dark:text-gray-100', danger: 'text-danger-600', - primary: 'text-primary-600', + primary: 'text-primary-600 dark:text-primary-400', muted: 'text-gray-500 dark:text-gray-400', subtle: 'text-gray-400 dark:text-gray-500', success: 'text-success-600', diff --git a/app/soapbox/features/compose/components/compose_form_button.tsx b/app/soapbox/features/compose/components/compose_form_button.tsx index 0cef5b30be..da28d6618d 100644 --- a/app/soapbox/features/compose/components/compose_form_button.tsx +++ b/app/soapbox/features/compose/components/compose_form_button.tsx @@ -21,7 +21,7 @@ const ComposeFormButton: React.FC = ({ return (
kzFhzsngj>{ diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx index 97a2818fe5..30b7d297e5 100644 --- a/app/soapbox/features/notifications/components/notification.tsx +++ b/app/soapbox/features/notifications/components/notification.tsx @@ -204,7 +204,7 @@ const Notification: React.FC = (props) => { return ( ); } else { diff --git a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx index 27d3d842d6..08cfb07bd1 100644 --- a/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx +++ b/app/soapbox/features/onboarding/steps/avatar-selection-step.tsx @@ -73,7 +73,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => {
-
+
@@ -102,7 +102,7 @@ const AvatarSelectionStep = ({ onNext }: { onNext: () => void }) => { onClick={openFilePicker} type='button' className={classNames({ - 'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white hover:bg-primary-700': true, + 'absolute bottom-3 right-2 p-1 bg-primary-600 rounded-full ring-2 ring-white dark:ring-slate-800 hover:bg-primary-700': true, 'opacity-50 pointer-events-none': isSubmitting, })} disabled={isSubmitting} diff --git a/app/soapbox/features/onboarding/steps/completed-step.tsx b/app/soapbox/features/onboarding/steps/completed-step.tsx index 3100936912..60f6fba135 100644 --- a/app/soapbox/features/onboarding/steps/completed-step.tsx +++ b/app/soapbox/features/onboarding/steps/completed-step.tsx @@ -1,5 +1,5 @@ import * as React from 'react'; -import { FormattedMessage } from'react-intl'; +import { FormattedMessage } from 'react-intl'; import { Button, Card, CardBody, Icon, Stack, Text } from 'soapbox/components/ui'; @@ -7,7 +7,7 @@ const CompletedStep = ({ onComplete }: { onComplete: () => void }) => ( - + diff --git a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx index e50c47741c..86d5dde488 100644 --- a/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx +++ b/app/soapbox/features/ui/components/modals/report-modal/steps/reason-step.tsx @@ -120,7 +120,7 @@ const ReasonStep = (_props: IReasonStep) => { value={rule.id} checked={isSelected} readOnly - className='h-4 w-4 cursor-pointer text-primary-600 border-gray-300 rounded focus:ring-primary-500' + className='h-4 w-4 cursor-pointer text-primary-600 dark:text-primary-400 border-gray-300 rounded focus:ring-primary-500' /> ); diff --git a/app/soapbox/features/verification/email_passthru.js b/app/soapbox/features/verification/email_passthru.js index dac2cc3bda2e4fcd57e7614fb853739b2555f2f7..131d5dd1a89b4ec0274ba3ad482b71a0ee3ef612 100644 GIT binary patch delta 32 ncmcbr`&xIy1a{$+#G-7glGKV4-GZXb+{B_vU6akd>>m68+KmiG delta 20 ccmaE@dsTPC1op{CICCbqbMS3e;5f|(0APFw5&!@I diff --git a/app/soapbox/features/verification/steps/email-verification.js b/app/soapbox/features/verification/steps/email-verification.js index be83406ccb3d832bf0889f27fa8b2ad0b7b0b8e7..fba2862c11064ca88cacd369ed3ea01033e2a6b6 100644 GIT binary patch delta 32 ncmeyZI8kZCMi$|e#G-7glGKV4-GZXb+{B_vU6al0SbTW^)x8Wk delta 12 TcmbQJ^jmSmMwZRTS-f}vB>M#k diff --git a/app/styles/components/columns.scss b/app/styles/components/columns.scss index 98f9a55841..160fef0b43 100644 --- a/app/styles/components/columns.scss +++ b/app/styles/components/columns.scss @@ -771,7 +771,7 @@ } a { - @apply text-primary-600 no-underline hover:underline; + @apply text-primary-600 dark:text-primary-400 no-underline hover:underline; } } diff --git a/app/styles/components/datepicker.scss b/app/styles/components/datepicker.scss index f5a25d0188..60cb584096 100644 --- a/app/styles/components/datepicker.scss +++ b/app/styles/components/datepicker.scss @@ -113,5 +113,5 @@ .react-datepicker__month-text--keyboard-selected, .react-datepicker__quarter-text--keyboard-selected, .react-datepicker__year-text--keyboard-selected { - @apply bg-primary-50 hover:bg-primary-100 text-primary-600; + @apply bg-primary-50 hover:bg-primary-100 text-primary-600 dark:text-primary-400; } diff --git a/app/styles/polls.scss b/app/styles/polls.scss index 33eb458753..a49315450c 100644 --- a/app/styles/polls.scss +++ b/app/styles/polls.scss @@ -193,7 +193,7 @@ } .button.button-secondary { - @apply h-auto py-1.5 px-2.5 text-primary-600 border-primary-600; + @apply h-auto py-1.5 px-2.5 text-primary-600 dark:text-primary-400 border-primary-600; } li { diff --git a/app/styles/utilities.scss b/app/styles/utilities.scss index 30eb71eed9..cb7f1919f2 100644 --- a/app/styles/utilities.scss +++ b/app/styles/utilities.scss @@ -13,5 +13,5 @@ } .mention { - @apply text-primary-600 hover:underline; + @apply text-primary-600 dark:text-primary-400 hover:underline; } From 25477443ef2bb205e97600eee7f248bd0eddf32a Mon Sep 17 00:00:00 2001 From: Justin Date: Mon, 9 May 2022 08:27:26 -0400 Subject: [PATCH 13/14] Fix unauth page layout --- app/index.ejs | 2 +- app/soapbox/containers/soapbox.tsx | 4 +- app/soapbox/features/auth_layout/index.tsx | 65 +++++++++++----------- 3 files changed, 36 insertions(+), 35 deletions(-) diff --git a/app/index.ejs b/app/index.ejs index 915b22ea13..495eeaff72 100644 --- a/app/index.ejs +++ b/app/index.ejs @@ -12,7 +12,7 @@ <%= snippets %> -
+
diff --git a/app/soapbox/containers/soapbox.tsx b/app/soapbox/containers/soapbox.tsx index ffc19ad214..e14ffb9664 100644 --- a/app/soapbox/containers/soapbox.tsx +++ b/app/soapbox/containers/soapbox.tsx @@ -132,7 +132,7 @@ const SoapboxMount = () => { const waitlisted = account && !account.source.get('approved', true); - const bodyClass = classNames('bg-white dark:bg-slate-900 text-base', { + const bodyClass = classNames('bg-white dark:bg-slate-900 text-base h-full', { 'no-reduce-motion': !settings.get('reduceMotion'), 'underline-links': settings.get('underlineLinks'), 'dyslexic': settings.get('dyslexicFont'), @@ -162,7 +162,7 @@ const SoapboxMount = () => { return ( - + {themeCss && } diff --git a/app/soapbox/features/auth_layout/index.tsx b/app/soapbox/features/auth_layout/index.tsx index adc436f6c1..d32038b8b8 100644 --- a/app/soapbox/features/auth_layout/index.tsx +++ b/app/soapbox/features/auth_layout/index.tsx @@ -20,44 +20,45 @@ const AuthLayout = () => { const siteTitle = useAppSelector(state => state.instance.title); return ( -
+
-
-
- - {logo ? ( - {siteTitle} - ) : ( - - )} - -
+
+
+
+ + {logo ? ( + {siteTitle} + ) : ( + + )} + +
-
-
- - - - - - - - - +
+
+ + + + + + + + + - - - - - + + + + + +
-
From 136a6c99bffc8d1f27e292c7662af55930dc61ed Mon Sep 17 00:00:00 2001 From: Justin Date: Mon, 9 May 2022 10:26:03 -0400 Subject: [PATCH 14/14] Add truncation to notification descriptor --- .../features/notifications/components/notification.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) diff --git a/app/soapbox/features/notifications/components/notification.tsx b/app/soapbox/features/notifications/components/notification.tsx index 30b7d297e5..26f56025f5 100644 --- a/app/soapbox/features/notifications/components/notification.tsx +++ b/app/soapbox/features/notifications/components/notification.tsx @@ -1,6 +1,6 @@ import React from 'react'; import { HotKeys } from 'react-hotkeys'; -import { FormattedMessage, useIntl } from 'react-intl'; +import { FormattedMessage, useIntl } from 'react-intl'; import { useHistory } from 'react-router-dom'; import Icon from '../../../components/icon'; @@ -286,10 +286,11 @@ const Notification: React.FC = (props) => { {renderIcon()} -
+
{message}