Draft: rough-ish draft of proposed color theme changes (#2067)

* color experimentation and troubleshooting

* create color scheme, assign colors, more ant overrides

* fun selection color

* Prettified Code!

* Correctly import opensans

* Prettified Code!

* Organize+standardize colors/names and update the app to use them

* Prettified Code!

* Use css var references instead of resolving value of vars in css files

* Prettified Code!

Co-authored-by: gingervitis <gingervitis@users.noreply.github.com>
Co-authored-by: Gabe Kangas <gabek@real-ity.com>
Co-authored-by: gabek <gabek@users.noreply.github.com>

web/components/modals/Follow/FollowModal.tsx

@@ -111,10 +111,12 @@ export default function FollowModal(props: Props) {
           </div>
         </div>
         <Space className={s.buttons}>
-          <Button disabled={!valid} onClick={remoteFollowButtonPressed}>
+          <Button disabled={!valid} type="primary" onClick={remoteFollowButtonPressed}>
             Follow
           </Button>
-          <Button onClick={joinButtonPressed}>Join the Fediverse</Button>
+          <Button onClick={joinButtonPressed} type="primary">
+            Join the Fediverse
+          </Button>
         </Space>
       </Spin>
     </Space>

web/components/modals/NameChangeModal.tsx

@@ -18,7 +18,7 @@ function UserColor(props: { color: number }): React.ReactElement {
   const { color } = props;
   const style: CSSProperties = {
     textAlign: 'center',
-    backgroundColor: `var(--theme-user-colors-${color})`,
+    backgroundColor: `var(--theme-color-users-${color})`,
     width: '100%',
     height: '100%',
   };