[Glitch] Implement CSS theme tokens behind feature flag

Port 284b46fee7 to glitch-soc

Signed-off-by: Claire <claire.github-309c@sitedethib.com>

app/javascript/flavours/glitch/components/status/boost_button.tsx

@@ -64,6 +64,7 @@ const StandaloneBoostButton: FC<ReblogButtonProps> = ({ status, counters }) => {
       title={intl.formatMessage(meta ?? title)}
       icon='retweet'
       iconComponent={iconComponent}
+      className='status__action-bar__button'
       onClick={!disabled ? handleClick : undefined}
       counter={
         counters
@@ -195,6 +196,7 @@ const BoostOrQuoteMenu: FC<ReblogButtonProps> = ({ status, counters }) => {
           isMenuDisabled ? messages.all_disabled : messages.reblog_or_quote,
         )}
         icon='retweet'
+        className='status__action-bar__button'
         iconComponent={boostIcon}
         counter={
           counters

app/javascript/flavours/glitch/components/status_action_bar/index.jsx

@@ -376,16 +376,21 @@ class StatusActionBar extends ImmutablePureComponent {
               status={status}
               needsStatusRefresh={quickBoosting && status.get('quote_approval') === null}
               items={menu}
-              icon='ellipsis-h'
               size={18}
-              iconComponent={MoreHorizIcon}
               direction='right'
               ariaLabel={intl.formatMessage(messages.more)}
               onOpen={() => {
                 dismissQuoteHint();
                 return true;
               }}
-            />
+            >
+              <IconButton
+                className='status__action-bar__button'
+                icon='ellipsis-h'
+                iconComponent={MoreHorizIcon}
+                title={intl.formatMessage(messages.more)}
+              />
+            </Dropdown>
           )}
         </RemoveQuoteHint>
 

app/javascript/flavours/glitch/features/about/components/rules.tsx

@@ -104,17 +104,19 @@ export const RulesSection: FC<RulesSectionProps> = ({ isLoading = false }) => {
               defaultMessage='Language'
             />
           </label>
-          <select onChange={handleLocaleChange} id='language-select'>
-            {localeOptions.map((option) => (
-              <option
-                key={option.value}
-                value={option.value}
-                selected={option.value === selectedLocale}
-              >
-                {option.text}
-              </option>
-            ))}
-          </select>
+          <div className='select-wrapper'>
+            <select onChange={handleLocaleChange} id='language-select'>
+              {localeOptions.map((option) => (
+                <option
+                  key={option.value}
+                  value={option.value}
+                  selected={option.value === selectedLocale}
+                >
+                  {option.text}
+                </option>
+              ))}
+            </select>
+          </div>
         </div>
       )}
     </Section>

app/javascript/flavours/glitch/features/account/components/follow_request_note.jsx

@@ -24,12 +24,12 @@ export default class FollowRequestNote extends ImmutablePureComponent {
         </div>
 
         <div className='follow-request-banner__action'>
-          <button type='button' className='button button-tertiary button--confirmation' onClick={onAuthorize}>
+          <button type='button' className='button button-secondary button--confirmation' onClick={onAuthorize}>
             <Icon id='check' icon={CheckIcon} />
             <FormattedMessage id='follow_request.authorize' defaultMessage='Authorize' />
           </button>
 
-          <button type='button' className='button button-tertiary button--destructive' onClick={onReject}>
+          <button type='button' className='button button-secondary button--destructive' onClick={onReject}>
             <Icon id='times' icon={CloseIcon} />
             <FormattedMessage id='follow_request.reject' defaultMessage='Reject' />
           </button>

app/javascript/flavours/glitch/features/compose/index.tsx

@@ -220,7 +220,7 @@ const Compose: React.FC<{ multiColumn: boolean }> = ({ multiColumn }) => {
 
             {/* eslint-disable-next-line jsx-a11y/no-static-element-interactions, jsx-a11y/click-events-have-key-events -- this is not a feature but a visual easter egg */}
             <div
-              className='drawer__inner__mastodon'
+              className='drawer__inner__mastodon with-zig-zag-decoration'
               onClick={handleCycleElefriend}
             >
               <img alt='' draggable='false' src={mascot ?? elephant} />

app/javascript/flavours/glitch/features/navigation_panel/components/disabled_account_banner.tsx

@@ -75,7 +75,7 @@ export const DisabledAccountBanner: React.FC = () => {
       </a>
       <button
         type='button'
-        className='button button--block button-tertiary'
+        className='button button--block button-secondary'
         onClick={handleLogOutClick}
       >
         <FormattedMessage

app/javascript/flavours/glitch/features/navigation_panel/components/sign_in_banner.tsx

@@ -46,7 +46,7 @@ export const SignInBanner: React.FC = () => {
         <a
           href={sso_redirect}
           data-method='post'
-          className='button button--block button-tertiary'
+          className='button button--block button-secondary'
         >
           <FormattedMessage
             id='sign_in_banner.sso_redirect'
@@ -98,7 +98,7 @@ export const SignInBanner: React.FC = () => {
         />
       </p>
       {signupButton}
-      <a href='/auth/sign_in' className='button button--block button-tertiary'>
+      <a href='/auth/sign_in' className='button button--block button-secondary'>
         <FormattedMessage id='sign_in_banner.sign_in' defaultMessage='Login' />
       </a>
     </div>

app/javascript/flavours/glitch/features/ui/components/bundle_column_error.jsx

@@ -98,7 +98,7 @@ class BundleColumnError extends PureComponent {
             <div className='error-column__message__actions'>
               {errorType === 'network' && <Button onClick={this.handleRetry}><FormattedMessage id='bundle_column_error.retry' defaultMessage='Try again' /></Button>}
               {errorType === 'error' && <CopyButton value={stacktrace}><FormattedMessage id='bundle_column_error.copy_stacktrace' defaultMessage='Copy error report' /></CopyButton>}
-              <Link to='/' className={classNames('button', { 'button-tertiary': errorType !== 'routing' })}><FormattedMessage id='bundle_column_error.return' defaultMessage='Go back home' /></Link>
+              <Link to='/' className={classNames('button', { 'button-secondary': errorType !== 'routing' })}><FormattedMessage id='bundle_column_error.return' defaultMessage='Go back home' /></Link>
             </div>
           </div>
         </div>

app/javascript/flavours/glitch/features/ui/components/modal_placeholder.tsx

@@ -46,7 +46,7 @@ export const ModalPlaceholder: React.FC<{
                   defaultMessage='Try again'
                 />
               </Button>
-              <Button onClick={handleClose} className='button button-tertiary'>
+              <Button onClick={handleClose} className='button button-secondary'>
                 <FormattedMessage
                   id='bundle_modal_error.close'
                   defaultMessage='Close'

app/javascript/flavours/glitch/features/ui/components/navigation_bar.tsx

@@ -104,7 +104,7 @@ const LoginOrSignUp: React.FC = () => {
         <a
           href={sso_redirect}
           data-method='post'
-          className='button button--block button-tertiary'
+          className='button button--block button-secondary'
         >
           <FormattedMessage
             id='sign_in_banner.sso_redirect'
@@ -143,7 +143,7 @@ const LoginOrSignUp: React.FC = () => {
     return (
       <div className='ui__navigation-bar__sign-up'>
         {signupButton}
-        <a href='/auth/sign_in' className='button button-tertiary'>
+        <a href='/auth/sign_in' className='button button-secondary'>
           <FormattedMessage
             id='sign_in_banner.sign_in'
             defaultMessage='Login'