Pleroma theme for mastofe

- resize columns dynamically, with min width of 330↵
- Change colours of mastodon frontend↵
- make avatars circled↵
- add slight hint of rounding on main ui components↵

app/javascript/mastodon/features/compose/components/search.js

@@ -20,7 +20,7 @@ class SearchPopout extends React.PureComponent {
     const { style } = this.props;
     const extraInformation = searchEnabled ? <FormattedMessage id='search_popout.tips.full_text' defaultMessage='Simple text returns statuses you have written, favourited, boosted, or have been mentioned in, as well as matching usernames, display names, and hashtags.' /> : <FormattedMessage id='search_popout.tips.text' defaultMessage='Simple text returns matching display names, usernames and hashtags' />;
     return (
-      <div style={{ ...style, position: 'absolute', width: 285 }}>
+      <div style={{ ...style, position: 'absolute', width: 315 }}>
         <Motion defaultStyle={{ opacity: 0, scaleX: 0.85, scaleY: 0.75 }} style={{ opacity: spring(1, { damping: 35, stiffness: 400 }), scaleX: spring(1, { damping: 35, stiffness: 400 }), scaleY: spring(1, { damping: 35, stiffness: 400 }) }}>
           {({ opacity, scaleX, scaleY }) => (
             <div className='search-popout' style={{ opacity: opacity, transform: `scale(${scaleX}, ${scaleY})` }}>

app/javascript/styles/mastodon/components.scss

@@ -669,7 +669,7 @@
   }
 
   a {
-    color: $secondary-text-color;
+    color: $pleroma-links;
     text-decoration: none;
 
     &:hover {
@@ -1862,6 +1862,8 @@ a.account__display-name {
 
   > .scrollable {
     background: $ui-base-color;
+    border-bottom-left-radius: 2px;
+    border-bottom-right-radius: 2px;
   }
 }
 
@@ -1875,7 +1877,7 @@ a.account__display-name {
 }
 
 .drawer {
-  width: 300px;
+  width: 330px;
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
@@ -1944,7 +1946,7 @@ a.account__display-name {
 
   .column,
   .drawer {
-    flex: 0 0 auto;
+    flex: 1 1 auto;
     padding: 10px;
     padding-left: 5px;
     padding-right: 5px;
@@ -1989,6 +1991,7 @@ a.account__display-name {
   overflow-y: auto;
   width: 100%;
   height: 100%;
+  border-radius: 2px;
 
   &.darker {
     background: $ui-base-color;
@@ -2025,6 +2028,7 @@ a.account__display-name {
   margin-bottom: 10px;
   display: flex;
   flex-direction: row;
+  border-radius: 2px;
 
   a {
     transition: background 100ms ease-in;
@@ -2774,6 +2778,8 @@ a.status-card.compact:hover {
   z-index: 2;
   outline: 0;
   overflow: hidden;
+  border-top-left-radius: 2px;
+  border-top-right-radius: 2px;
 
   & > button {
     margin: 0;

app/javascript/styles/mastodon/variables.scss

@@ -6,11 +6,17 @@ $error-red: #df405a !default;        // Cerise
 $warning-red: #ff5050 !default;      // Sunset Orange
 $gold-star: #ca8f04 !default;        // Dark Goldenrod
 
+// Pleroma-Dark colors
+$pleroma-bg: #121a24;
+$pleroma-fg: #182230;
+$pleroma-text: #b9b9ba;
+$pleroma-links: #d8a070;
+
 // Values from the classic Mastodon UI
-$classic-base-color: #282c37;         // Midnight Express
-$classic-primary-color: #9baec8;      // Echo Blue
-$classic-secondary-color: #d9e1e8;    // Pattens Blue
-$classic-highlight-color: #2b90d9;    // Summer Sky
+$classic-base-color: $pleroma-bg;
+$classic-primary-color: #9baec8;
+$classic-secondary-color: #d9e1e8;
+$classic-highlight-color: #d8a070;
 
 // Variables for defaults in UI
 $base-shadow-color: $black !default;