github.com/argoproj/argo-cd/v3@v3.2.1/ui/src/app/settings/components/appearance-list/appearance-list.tsx (about)

     1  import * as React from 'react';
     2  import {DataLoader, Page} from '../../../shared/components';
     3  import {services} from '../../../shared/services';
     4  import {Select, SelectOption} from 'argo-ui';
     5  
     6  require('./appearance-list.scss');
     7  
     8  export const AppearanceList = () => {
     9      return (
    10          <Page
    11              title={'Appearance'}
    12              toolbar={{
    13                  breadcrumbs: [{title: 'Settings', path: '/settings'}, {title: 'Appearance'}]
    14              }}>
    15              <DataLoader load={() => services.viewPreferences.getPreferences()}>
    16                  {pref => (
    17                      <div className='appearance-list'>
    18                          <div className='argo-container'>
    19                              <div className='appearance-list__panel'>
    20                                  <div className='row'>
    21                                      <span>Theme</span>
    22                                      <Select
    23                                          value={pref.theme}
    24                                          onChange={(value: SelectOption) => services.viewPreferences.updatePreferences({theme: value.value})}
    25                                          options={[
    26                                              {value: 'auto', title: 'Auto'},
    27                                              {value: 'light', title: 'Light'},
    28                                              {value: 'dark', title: 'Dark'}
    29                                          ]}></Select>
    30                                  </div>
    31                              </div>
    32                          </div>
    33                      </div>
    34                  )}
    35              </DataLoader>
    36          </Page>
    37      );
    38  };