social: experimenting with new art

components/core/ApplicationHeader.js

@@ -49,7 +49,10 @@ const STYLES_ICON_ELEMENT = css`
 `;
 
 const STYLES_ICON_ELEMENT_CUSTOM = css`
-  background-color: ${Constants.system.brand};
+  border-radius: 3px;
+  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.07);
+  background-image: url('/static/social.png');
+  background-size: cover;
   height: 48px;
   width: 48px;
   display: inline-flex;

components/core/WebsitePrototypeWrapper.js

@@ -15,7 +15,7 @@ export default class WebsitePrototypeWrapper extends React.Component {
           <meta property="og:url" content={this.props.url} />
           <meta property="og:title" content={this.props.title} />
           <meta property="og:description" content={this.props.description} />
-          <meta property="og:image" content="/static/social.jpg" />
+          <meta property="og:image" content="/static/social.png" />
 
           <meta property="twitter:card" content="summary_large_image" />
           <meta property="twitter:url" content={this.props.url} />
@@ -24,7 +24,7 @@ export default class WebsitePrototypeWrapper extends React.Component {
             property="twitter:description"
             content={this.props.description}
           />
-          <meta property="twitter:image" content="/static/social.jpg" />
+          <meta property="twitter:image" content="/static/social.png" />
 
           <link
             rel="icon"

components/system/SystemPage.js

@@ -28,6 +28,9 @@ const STYLES_ICON_ELEMENT = css`
   align-items: center;
   justify-content: center;
   background-color: ${Constants.system.brand};
+  background-image: url('/static/social.png');
+  border-radius: 88px;
+  background-size: cover;
   color: ${Constants.system.white};
   user-select: none;
 `;
@@ -149,13 +152,13 @@ export default class SystemPage extends React.Component {
           <meta property="og:url" content={url} />
           <meta property="og:title" content={title} />
           <meta property="og:description" content={description} />
-          <meta property="og:image" content="/static/social.jpg" />
+          <meta property="og:image" content="/static/social.png" />
 
           <meta property="twitter:card" content="summary_large_image" />
           <meta property="twitter:url" content={url} />
           <meta property="twitter:title" content={title} />
           <meta property="twitter:description" content={description} />
-          <meta property="twitter:image" content="/static/social.jpg" />
+          <meta property="twitter:image" content="/static/social.png" />
 
           <link
             rel="icon"

pages/system/index.js

@@ -18,8 +18,9 @@ export default class SystemPageRoot extends React.Component {
             display: "inline-flex",
             width: "312px",
             height: "312px",
-            borderRadius: "312px",
+            borderRadius: "4px",
             marginBottom: 48,
+            boxShadow: '0 1px 4px rgba(0, 0, 0, 0.09)'
           }}
         />
         <System.H1>SDS 0.0.5</System.H1>