Improve right nav, add EULA

src/components/dialogs/BlueskyPlus/index.tsx

@@ -22,6 +22,7 @@ import {GradientFill} from '#/components/GradientFill'
 import {Full as BlueskyPlusLogo} from '#/components/icons/BlueskyPlus'
 import {CheckThick_Stroke2_Corner0_Rounded as CheckThink} from '#/components/icons/Check'
 import {PlusLarge_Stroke2_Corner0_Rounded as Plus} from '#/components/icons/Plus'
+import {InlineLinkText} from '#/components/Link'
 import {Loader} from '#/components/Loader'
 import {Text} from '#/components/Typography'
 
@@ -229,6 +230,31 @@ function DialogInner() {
         </Button>
       </View>
 
+      <View style={[a.pt_md]}>
+        <Text style={[a.text_xs]}>
+          <InlineLinkText
+            to="#"
+            label="TODO REPLACE"
+            style={[a.text_xs, t.atoms.text_contrast_low]}>
+            Terms and Conditions
+          </InlineLinkText>{' '}
+          &middot;{' '}
+          <InlineLinkText
+            to="#"
+            label="TODO REPLACE"
+            style={[a.text_xs, t.atoms.text_contrast_low]}>
+            Privacy Policy
+          </InlineLinkText>{' '}
+          &middot;{' '}
+          <InlineLinkText
+            to="#"
+            label="TODO REPLACE"
+            style={[a.text_xs, t.atoms.text_contrast_low]}>
+            EULA
+          </InlineLinkText>
+        </Text>
+      </View>
+
       <Dialog.Close />
     </Dialog.ScrollableInner>
   )

src/components/icons/BlueskyPlus.tsx

@@ -91,7 +91,7 @@ export function Logotype(props: Props) {
 function Gradients() {
   return (
     <Defs>
-      <LinearGradient id="nordic" x1="0" y1="1" x2="1" y2="0">
+      <LinearGradient id="nordic" x1="0" y1="1" x2="1" y2="1">
         <Stop offset="0" stopColor="#083367" stopOpacity="1" />
         <Stop offset="1" stopColor="#9EE8C1" stopOpacity="1" />
       </LinearGradient>

src/view/shell/desktop/RightNav.tsx

@@ -14,8 +14,10 @@ import {atoms as a, tokens, useTheme, web} from '#/alf'
 import {Button} from '#/components/Button'
 import {useDialogControl} from '#/components/Dialog'
 import {BlueskyPlus} from '#/components/dialogs/BlueskyPlus'
+import {Divider} from '#/components/Divider'
 import {GradientFill} from '#/components/GradientFill'
-import {Logotype} from '#/components/icons/BlueskyPlus'
+import {Full as BlueskyPlusLogo} from '#/components/icons/BlueskyPlus'
+import {SquareArrowTopRight_Stroke2_Corner0_Rounded as SquareArrowTopRight} from '#/components/icons/SquareArrowTopRight'
 import {InlineLinkText} from '#/components/Link'
 import {ProgressGuideList} from '#/components/ProgressGuide/List'
 import {Text} from '#/components/Typography'
@@ -74,30 +76,57 @@ export function DesktopRightNav({routeName}: {routeName: string}) {
               onPress={() => subscriptionsDialogControl.open()}
               label={_(msg`Subscribe to Bluesky Plus`)}
               style={[a.p_lg, a.overflow_hidden, a.rounded_md]}>
-              <GradientFill
+              {({hovered}) => (
-                gradient={tokens.gradients.nordic}
+                <>
-                rotate="270deg"
+                  <GradientFill gradient={tokens.gradients.nordic} />
-              />
+                  <View
-              <View
+                    style={[
-                style={[
+                      a.absolute,
-                  a.absolute,
+                      t.atoms.bg,
-                  a.inset_0,
+                      {
-                  a.rounded_md,
+                        borderRadius: 8,
-                  {borderWidth: 2, borderColor: 'white', opacity: 0.1},
+                        top: a.pt_xs.paddingTop,
-                ]}
+                        bottom: a.pt_xs.paddingTop,
-              />
+                        left: a.pt_xs.paddingTop,
+                        right: a.pt_xs.paddingTop,
+                      },
+                    ]}>
+                    {hovered && (
+                      <GradientFill
+                        gradient={tokens.gradients.nordic}
+                        style={{opacity: 0.1}}
+                      />
+                    )}
+                  </View>
 
-              <View style={[a.flex_1, a.relative, a.z_10]}>
+                  <View style={[a.flex_1, a.relative, a.z_10, a.gap_sm]}>
-                <Logotype width={100} fill="white" />
+                    <View style={[a.flex_row, a.justify_between]}>
+                      <BlueskyPlusLogo width={100} fill="nordic" />
+                      <SquareArrowTopRight
+                        fill={t.atoms.text_contrast_low.color}
+                        size="md"
+                      />
+                    </View>
 
-                <View style={[a.pt_xs]}>
+                    <Divider />
-                  <Text style={[a.text_sm, a.leading_tight, {color: 'white'}]}>
+
-                    <Trans>
+                    <View style={[a.flex_row, a.justify_between]}>
-                      Support Bluesky and get access to exclusive features.
+                      <Text
-                    </Trans>
+                        style={[
-                  </Text>
+                          a.text_sm,
-                </View>
+                          a.leading_snug,
-              </View>
+                          a.font_bold,
+                          t.atoms.text_contrast_medium,
+                        ]}>
+                        <Trans>Subscribe now</Trans>
+                      </Text>
+                      <Text style={[a.text_sm, a.leading_snug]}>
+                        <Trans>$8 / month</Trans>
+                      </Text>
+                    </View>
+                  </View>
+                </>
+              )}
             </Button>
             <BlueskyPlus control={subscriptionsDialogControl} />
           </View>