Users profile tweaks (#3443)

## Which issue(s) this PR fixes

https://github.com/grafana/oncall/issues/3340
https://github.com/grafana/oncall/issues/3341

CHANGELOG.md

@@ -5,6 +5,12 @@ All notable changes to this project will be documented in this file.
 The format is based on [Keep a Changelog](https://keepachangelog.com/en/1.0.0/),
 and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## Unreleased
+
+### Fixed
+
+- User profile UI tweaks ([#3443](https://github.com/grafana/oncall/pull/3443))
+
 ## v1.3.64 (2023-11-28)
 
 ### Fixed

grafana-plugin/src/containers/Labels/Labels.module.css

@@ -1,2 +0,0 @@
-.root {
-}

grafana-plugin/src/containers/Labels/Labels.tsx

@@ -2,7 +2,6 @@ import React, { forwardRef, useCallback, useImperativeHandle, useState } from 'r
 
 import { ServiceLabels, ServiceLabelsProps } from '@grafana/labels';
 import { Field } from '@grafana/ui';
-import cn from 'classnames/bind';
 import { isEmpty } from 'lodash-es';
 import { observer } from 'mobx-react';
 
@@ -10,10 +9,6 @@ import { LabelKeyValue } from 'models/label/label.types';
 import { useStore } from 'state/useStore';
 import { openErrorNotification } from 'utils';
 
-import styles from './Labels.module.css';
-
-const cx = cn.bind(styles);
-
 export interface LabelsProps {
   value: LabelKeyValue[];
   errors: any;
@@ -107,7 +102,7 @@ const Labels = observer(
     }, []);
 
     return (
-      <div className={cx('root')}>
+      <div>
         <Field label="Labels">
           <ServiceLabels
             loadById

grafana-plugin/src/containers/Labels/LabelsFilter.tsx

@@ -1,16 +1,11 @@
 import React, { useEffect, useState } from 'react';
 
 import { SelectableValue } from '@grafana/data';
-import cn from 'classnames/bind';
 import { observer } from 'mobx-react';
 
 import LabelsFilterComponent from 'components/LabelsFilter/LabelsFilter';
 import { useStore } from 'state/useStore';
 
-import styles from './Labels.module.css';
-
-const cx = cn.bind(styles);
-
 interface LabelsFilterProps {
   filterType: 'labels' | 'alert_group_labels';
   autoFocus: boolean;
@@ -77,7 +72,7 @@ const LabelsFilter = observer((props: LabelsFilterProps) => {
   };
 
   return (
-    <div className={cx('root', className)}>
+    <div className={className}>
       <LabelsFilterComponent
         autoFocus={autoFocus}
         labelField="name"

grafana-plugin/src/containers/UserSettings/parts/connectors/PhoneConnector.tsx

@@ -1,12 +1,20 @@
 import React, { useCallback } from 'react';
 
-import { Alert, Button, HorizontalGroup, InlineField, Input } from '@grafana/ui';
+import { Alert, Button, HorizontalGroup, InlineField, Input, VerticalGroup } from '@grafana/ui';
+import cn from 'classnames/bind';
 
+import Tag from 'components/Tag/Tag';
+import Text from 'components/Text/Text';
 import WithConfirm from 'components/WithConfirm/WithConfirm';
 import { UserSettingsTab } from 'containers/UserSettings/UserSettings.types';
 import { User } from 'models/user/user.types';
 import { AppFeature } from 'state/features';
 import { useStore } from 'state/useStore';
+import { getVar } from 'utils/DOM';
+
+import styles from 'containers/UserSettings/parts/index.module.css';
+
+const cx = cn.bind(styles);
 
 interface PhoneConnectorProps {
   id: User['pk'];
@@ -122,10 +130,21 @@ const PhoneConnector = (props: PhoneConnectorProps) => {
               </InlineField>
             </div>
           ) : storeUser.unverified_phone_number ? (
-            <div>
+            <VerticalGroup spacing="xs">
-              <InlineField label="Phone" labelWidth={12}>
+              <div className={cx('tag-container')}>
-                <HorizontalGroup spacing="xs">
+                <Tag
+                  color={getVar('--tag-secondary-transparent')}
+                  border={getVar('--border-weak')}
+                  className={cx('tag', 'tag-left')}
+                >
+                  <Text type="primary" size="small">
+                    Phone
+                  </Text>
+                </Tag>
+
+                <div className={cx('tag-right')}>
                   <Input disabled={true} value={storeUser.unverified_phone_number} />
+
                   {isCurrentUser ? (
                     <Button onClick={handleClickConfirmPhoneButton}>Verify</Button>
                   ) : (
@@ -133,10 +152,11 @@ const PhoneConnector = (props: PhoneConnectorProps) => {
                       <Button onClick={handleClickConfirmPhoneButton}>Verify</Button>
                     </WithConfirm>
                   )}
-                </HorizontalGroup>
+                </div>
-              </InlineField>
+              </div>
+
               <Alert title="Phone number is not verified. Verify or change" severity="warning" />
-            </div>
+            </VerticalGroup>
           ) : (
             <div>
               <InlineField label="Phone" labelWidth={12}>

grafana-plugin/src/containers/UserSettings/parts/index.module.css

@@ -28,3 +28,26 @@
   text-align: center;
   justify-content: center;
 }
+
+.tag-container {
+  display: flex;
+  gap: 4px;
+  width: 100%;
+}
+
+.tag {
+  font-weight: 500;
+  font-size: 12px;
+  height: 32px;
+  line-height: 32px;
+  padding: 0 8px;
+  width: 120px;
+}
+
+.tag-left {
+  flex-basis: 120px;
+}
+
+.tag-right {
+  flex-basis: calc(100% - 120px);
+}

grafana-plugin/src/containers/UserSettings/parts/tabs/PhoneVerification/PhoneVerification.tsx

@@ -53,7 +53,7 @@ const PhoneVerification = observer((props: PhoneVerificationProps) => {
     }),
     {
       code: '',
-      phone: user.verified_phone_number || '+',
+      phone: user.verified_phone_number || user.unverified_phone_number || '+',
       isLoading: false,
       isCodeSent: false,
       isPhoneCallInitiated: false,