Добавил тему "Веспера"

src/components/profile/Message/index.tsx

@@ -1,37 +0,0 @@
-import React, { FC } from 'react';
-
-import classNames from 'classnames';
-
-import { Group } from '~/components/containers/Group';
-import { ImagePresets } from '~/constants/urls';
-import markdown from '~/styles/common/markdown.module.scss';
-import { IMessage } from '~/types';
-import { formatText, getPrettyDate, getURL } from '~/utils/dom';
-
-import styles from './styles.module.scss';
-
-interface IProps {
-  message: IMessage;
-  incoming: boolean;
-}
-
-const Message: FC<IProps> = ({ message, incoming }) => {
-  return (
-    <div className={classNames(styles.message, { [styles.incoming]: incoming })}>
-      <div className={styles.text}>
-        <Group
-          dangerouslySetInnerHTML={{ __html: formatText(message.text) }}
-          className={markdown.wrapper}
-        />
-      </div>
-
-      <div
-        className={styles.avatar}
-        style={{ backgroundImage: `url("${getURL(message.from.photo, ImagePresets.avatar)}")` }}
-      />
-
-      <div className={styles.stamp}>{getPrettyDate(message.created_at)}</div>
-    </div>
-  );
-};
-export { Message };

src/components/profile/Message/styles.module.scss

@@ -1,100 +0,0 @@
-@import "src/styles/variables";
-
-$incoming_color: transparentize($wisegreen, 0.7);
-$outgoing_color: $comment_bg;
-
-.message {
-  align-items: flex-end !important;
-  display: flex;
-  flex-direction: row;
-  padding: 0 0 0 42px;
-  position: relative;
-  word-break: break-word;
-
-  &::before {
-    position: absolute;
-    content: '';
-    width: 0;
-    height: 0;
-    border-style: solid;
-    border-width: 20px 0 0 20px;
-    border-color: transparent transparent transparent $comment_bg;
-    bottom: 0;
-    right: 24px;
-  }
-
-  &.incoming {
-    flex-direction: row-reverse;
-    padding: 0 40px 0 0;
-
-    .text {
-      background: $incoming_color;
-      border-radius: $radius $radius $radius 0;
-    }
-
-    .stamp {
-      left: auto;
-      right: 42px;
-    }
-
-    &::before {
-      content: '';
-      border-width: 0 0 16px 16px;
-      border-color: transparent transparent $incoming_color transparent;
-      left: 24px;
-      right: auto;
-      z-index: 1;
-    }
-  }
-}
-
-.avatar {
-  width: 40px;
-  height: 40px;
-  flex: 0 0 40px;
-  border-radius: $radius;
-
-  background: 50% 50% no-repeat;
-  background-size: cover;
-}
-
-.text {
-  padding: $gap $gap $gap * 2 $gap;
-  background: $outgoing_color;
-  word-wrap: break-word;
-  word-break: break-word;
-  width: 100%;
-  border-radius: $radius $radius 0 $radius;
-  position: relative;
-  box-sizing: border-box;
-}
-
-.form {
-  width: 100%;
-  border-radius: $radius $radius 0 $radius;
-  background: $outgoing_color;
-  box-sizing: border-box;
-}
-
-.stamp {
-  position: absolute;
-  opacity: 0.5;
-  // background: transparentize($color: #000000, $amount: 0.9);
-  font: $font_10_regular;
-  bottom: 0;
-  left: 42px;
-  padding: 2px $gap;
-  border-radius: $radius;
-}
-
-.restore {
-  color: $red;
-  fill: $red;
-}
-
-.deleted {
-  background: mix($red, $content_bg, 50%);
-  border-radius: $radius $radius $radius 0;
-  padding: $gap * 0.5;
-  z-index: 2;
-}

src/components/profile/ProfileAccountsError/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .wrap {
   position: absolute;
@@ -15,7 +15,7 @@
   box-sizing: border-box;
   border-radius: $radius;
 
-  @include blur($red);
+  @include blur;
 }
 
 .title {

src/components/profile/ProfileAvatar/index.tsx

@@ -14,7 +14,12 @@ export interface ProfileAvatarProps {
   onChangePhoto: (file: File) => void;
 }
 
-const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit, size }) => {
+const ProfileAvatar: FC<ProfileAvatarProps> = ({
+  photo,
+  onChangePhoto,
+  canEdit,
+  size,
+}) => {
   const onInputChange = useCallback(
     async (event: ChangeEvent<HTMLInputElement>) => {
       if (!event.target.files?.length) {
@@ -23,10 +28,12 @@ const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit,
 
       onChangePhoto(event.target.files[0]);
     },
-    [onChangePhoto]
+    [onChangePhoto],
   );
 
-  const backgroundImage = photo ? `url("${getURL(photo, ImagePresets.avatar)}")` : undefined;
+  const backgroundImage = photo
+    ? `url("${getURL(photo, ImagePresets.avatar)}")`
+    : undefined;
 
   return (
     <div
@@ -38,7 +45,15 @@ const ProfileAvatar: FC<ProfileAvatarProps> = ({ photo, onChangePhoto, canEdit,
       }}
     >
       {canEdit && <input type="file" onInput={onInputChange} />}
-      {canEdit && <Button iconLeft="photo_add" round iconOnly className={styles.can_edit} />}
+      {canEdit && (
+        <Button
+          color="info"
+          iconLeft="photo_add"
+          round
+          iconOnly
+          className={styles.button}
+        />
+      )}
     </div>
   );
 };

src/components/profile/ProfileAvatar/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .avatar {
   @include outer_shadow();
@@ -21,7 +21,7 @@
   }
 }
 
-.can_edit {
+.button {
   position: absolute;
   right: -4px;
   bottom: -4px;

src/components/profile/ProfileDescription/styles.module.scss

@@ -1,4 +1,4 @@
-@import "src/styles/variables";
+@import 'src/styles/variables';
 
 .content {
   padding: $gap * 2;
@@ -17,7 +17,7 @@
   min-height: 33vh;
   padding: 40px;
   box-sizing: border-box;
-  color: transparentize($color: white, $amount: 0.8);
+  color: $gray_75;
   text-transform: uppercase;
   font: $font_16_semibold;
 }

src/components/profile/ProfileSidebarSettings/index.tsx

@@ -47,9 +47,7 @@ const ProfileSidebarSettings: FC<IProps> = () => {
               Отмена
             </Button>
 
-            <Button color="secondary" type="submit">
-              Сохранить
-            </Button>
+            <Button type="submit">Сохранить</Button>
           </div>
         </Form>
       </SettingsProvider>