Move files and rename classes.

src/app/molecules/image-upload/ImageUpload.jsx

@@ -3,10 +3,10 @@ import PropTypes from 'prop-types';
 
 import initMatrix from '../../../client/initMatrix';
 
-import GenIC from '../../../../public/res/ic/outlined/settings.svg';
-import Avatar from '../avatar/Avatar';
+import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
+import Avatar from '../../atoms/avatar/Avatar';
 
-import RawIcon from '../system-icons/RawIcon';
+import RawIcon from '../../atoms/system-icons/RawIcon';
 import './ImageUpload.scss';
 
 function ImageUpload({
@@ -29,8 +29,8 @@ function ImageUpload({
   }
 
   return (
-    <button type="button" className="img-upload-container" onClick={() => { uploadImageRef.current.click(); }}>
-      <div className="img-upload-mask">
+    <button type="button" className="img-upload" onClick={() => { uploadImageRef.current.click(); }}>
+      <div className="img-upload__mask">
         <Avatar
           imageSrc={imageSrc}
           text={text.slice(0, 1)}
@@ -38,8 +38,8 @@ function ImageUpload({
           size="large"
         />
       </div>
-      <div className="img-upload-icon">
-        <RawIcon size="small" src={GenIC} />
+      <div className="img-upload__icon">
+        <RawIcon size="small" src={SettingsIC} />
       </div>
       <input onChange={uploadImage} style={{ display: 'none' }} ref={uploadImageRef} type="file" />
     </button>

src/app/molecules/image-upload/ImageUpload.scss

@@ -1,20 +1,20 @@
-.img-upload-container {
+.img-upload {
 	display: flex;
 	flex-direction: row-reverse;
 	width: 80px;
 	height: 80px;
 }
 
-.img-upload-container:hover {
+.img-upload:hover {
 	cursor: pointer;
 }
 
-.img-upload-mask {
+.img-upload__mask {
 	mask: url('../../../../public/res/svg/avatar-clip.svg');
-	//width: 80px;
+	-webkit-mask: url('../../../../public/res/svg/avatar-clip.svg');
 }
 
-.img-upload-icon {
+.img-upload__icon {
   z-index: 1;
   position: absolute;
 }

src/app/organisms/profile-editor/ProfileEditor.jsx

@@ -5,7 +5,7 @@ import initMatrix from '../../../client/initMatrix';
 import colorMXID from '../../../util/colorMXID';
 
 import Button from '../../atoms/button/Button';
-import ImageUpload from '../../atoms/image-upload/ImageUpload';
+import ImageUpload from '../../molecules/image-upload/ImageUpload';
 import Input from '../../atoms/input/Input';
 import Text from '../../atoms/text/Text';
 
@@ -45,12 +45,12 @@ function ProfileEditor({
   return (
     <form className="profile-editor">
       <ImageUpload text={username} bgColor={bgColor} imageSrc={imageSrc} onUpload={handleUpload} />
-      <div className="display-name-input-container">
+      <div className="profile-editor__input-container">
         <Text variant="b3">
           Display name of&nbsp;
           {mx.getUserId()}
         </Text>
-        <Input id="display-name-input" onChange={onDisplayNameInputChange} placeholder={mx.getUser(mx.getUserId()).displayName} forwardRef={displayNameRef} />
+        <Input id="profile-editor__input" onChange={onDisplayNameInputChange} placeholder={mx.getUser(mx.getUserId()).displayName} forwardRef={displayNameRef} />
       </div>
       <Button variant="primary" onClick={saveDisplayName} disabled={disabled}>Save</Button>
     </form>

src/app/organisms/profile-editor/ProfileEditor.scss

@@ -3,11 +3,11 @@
   align-items: end;
 }
 
-.img-upload-container {
+.img-upload {
   margin-right: var(--sp-normal)
 }
 
-.display-name-input-container {
+.profile-editor__input-container {
   display: flex;
   flex-direction: column;
   margin-right: var(--sp-normal);
@@ -15,7 +15,7 @@
   max-width: 400px;
 }
 
-.display-name-input-container > .text-b3 {
+.profile-editor__input-container > .text-b3 {
   margin-bottom: var(--sp-ultra-tight)
 }
 

src/app/organisms/settings/Settings.jsx

@@ -14,10 +14,11 @@ import SegmentedControls from '../../atoms/segmented-controls/SegmentedControls'
 
 import PopupWindow, { PWContentSelector } from '../../molecules/popup-window/PopupWindow';
 import SettingTile from '../../molecules/setting-tile/SettingTile';
-import ProfileEditor from '../../molecules/profile-editor/ProfileEditor';
 import ImportE2ERoomKeys from '../../molecules/import-e2e-room-keys/ImportE2ERoomKeys';
 
-import GenIC from '../../../../public/res/ic/outlined/settings.svg';
+import ProfileEditor from '../profile-editor/ProfileEditor';
+
+import SettingsIC from '../../../../public/res/ic/outlined/settings.svg';
 import SunIC from '../../../../public/res/ic/outlined/sun.svg';
 import LockIC from '../../../../public/res/ic/outlined/lock.svg';
 import InfoIC from '../../../../public/res/ic/outlined/info.svg';
@@ -120,7 +121,7 @@ function AboutSection() {
 function Settings({ isOpen, onRequestClose }) {
   const settingSections = [{
     name: 'General',
-    iconSrc: GenIC,
+    iconSrc: SettingsIC,
     render() {
       return <GeneralSection />;
     },