fix: small ui fixes

app/components/App.js

@@ -43,7 +43,8 @@ const App = ({ api, widgets, isSyncing }) => {
       nextWidgets = widgets
       nextWidgets[index] = widgetObject
     }
-    const cId = (await ipfs.object.put({ Data: Buffer.from(JSON.stringify(nextWidgets)), Links: [] }, { enc: 'json', pin: true })).string
+    const cId = (await ipfs.add(Buffer.from(JSON.stringify(nextWidgets))))[0].hash
+    //const cId = (await ipfs.object.put({ Data: Buffer.from(JSON.stringify(nextWidgets)), Links: [] }, { enc: 'json', pin: true })).string
     api.updateContent(cId).toPromise()
     setEditWidget(null)
   }, [ api, widgets ])
@@ -53,7 +54,7 @@ const App = ({ api, widgets, isSyncing }) => {
   }
 
   const handleEditModeSubmit = useCallback(async () => {
-    const cId = (await ipfs.object.put({ Data: Buffer.from(JSON.stringify(editedWidgets)), Links: [] }, { enc: 'json', pin: true })).string
+    const cId = (await ipfs.add(Buffer.from(JSON.stringify(editedWidgets))))[0].hash
     api.updateContent(cId).toPromise()
     setEditMode(false)
   }, [ api, editedWidgets, setEditMode ])

app/components/Content/EmptyState.js

@@ -31,7 +31,7 @@ const EmptyState = React.memo(({ isSyncing, onActionClick }) => {
               grid-template-columns: auto auto;
               grid-gap: ${1 * GU}px;
               /* Fixed weight to avoid flicker
-              resizing when switching from 
+              resizing when switching from
               text to syncing state */
               height: ${10.5 * GU}px;
               margin: ${3 * GU}px 0;
@@ -52,8 +52,7 @@ const EmptyState = React.memo(({ isSyncing, onActionClick }) => {
             </div>
             <div
               css={`
-                /* No aragon color defined for this */
-                color: #637381;
+                color: ${theme.surfaceContentSecondary}
                 margin: ${1 * GU}px 0;
                 ${textStyle('body2')}
               `}

app/components/Content/WidgetMapper.js

@@ -24,7 +24,7 @@ import { useEditMode } from '../../context/Edit'
 const LABELS = {
   ACTIVITY: 'Activity feed',
   DOT_VOTES: 'Latest dot votes',
-  MARKDOWN: 'Custom content',
+  MARKDOWN: null,
   VOTES: 'Latest votes',
 }
 
@@ -75,24 +75,20 @@ const WidgetHeader = ({ type }) => {
   const { editMode } = useEditMode()
   const label = LABELS[type]
   return (
-    <>
-      <div
-        css={`
-          display: flex;
-          flex: 0 0 ${5 * GU}px;
-          align-items: center;
-          ${textStyle('body1')}
-        `}
-      >
-        <span css='flex: 1 0 auto'>{label}</span>
-        {false && editMode && <HeaderArrows />}
-      </div>
-      <SidePanelSeparator
-        css={`
-          margin: ${3 * GU}px -${3 * GU}px;
-        `}
-      />
-    </>
+    <div
+      css={`
+        display: flex;
+        flex: 0 0 ${5 * GU}px;
+        align-items: center;
+        ${textStyle('body1')}
+        font-weight: 700;
+        font-size: 1.5em;
+        margin-bottom: ${GU}px;
+      `}
+    >
+      <span css='flex: 1 0 auto'>{label}</span>
+      {false && editMode && <HeaderArrows />}
+    </div>
   )
 }
 
@@ -109,7 +105,7 @@ const Widget = ({ id, children, type, onEditMarkdown, ...props }) => {
 
   const onRemove = async id => {
     const nextWidgets = widgets.filter(w => w.id !== id)
-    const cId = (await ipfs.object.put({ Data: Buffer.from(JSON.stringify(nextWidgets)), Links: [] }, { enc: 'json', pin: true })).string
+    const cId = (await ipfs.add(Buffer.from(JSON.stringify(nextWidgets))))[0].hash
     api.updateContent(cId).toPromise()
   }
 
@@ -123,7 +119,7 @@ const Widget = ({ id, children, type, onEditMarkdown, ...props }) => {
         height: auto;
         justify-content: center;
         overflow: hidden;
-        padding: ${2.25 * GU}px ${3 * GU}px;
+        padding: ${3 * GU}px;
         width: auto;
         margin-bottom: ${2 * GU}px;
         &.sortable-ghost {
@@ -141,7 +137,7 @@ const Widget = ({ id, children, type, onEditMarkdown, ...props }) => {
         css={`
             position: absolute;
             right: ${3 * GU}px;
-            top: ${3* GU}px;
+            top: ${3 * GU}px;
             display: flex;
             justify-content: flex-start;
           `}
@@ -167,7 +163,7 @@ const Widget = ({ id, children, type, onEditMarkdown, ...props }) => {
         />
       </div>
       }
-      {(type !== 'MARKDOWN' || editMode) && <WidgetHeader type={type} />}
+      {type !== 'MARKDOWN' && <WidgetHeader type={type} />}
       {React.cloneElement(children, props)}
     </Card>
   )

app/components/EditModeButtons.js

@@ -1,14 +1,20 @@
 import React from 'react'
 import PropTypes from 'prop-types'
 
-import { Button, GU } from '@aragon/ui'
+import { Button, GU, Help } from '@aragon/ui'
 
 const EditModeButtons = ({ onCancel, onSubmit }) => {
   return (
-    <>
-      <Button css={`margin-right: ${GU}px;`} label="Cancel" onClick={onCancel} />
+    <div css={`
+      display: flex;
+      align-items: center;
+    `}>
+      <Help hint="Drag and drop widgets to change the layout">
+        Drag and drop widgets to change the layout.
+      </Help>
+      <Button css={`margin: 0 ${GU}px;`} label="Cancel" onClick={onCancel} />
       <Button label="Submit" mode="strong" onClick={onSubmit} />
-    </>
+    </div>
   )
 }
 
@@ -17,4 +23,4 @@ EditModeButtons.propTypes = {
   onSubmit: PropTypes.func.isRequired,
 }
 
-export default EditModeButtons
+export default EditModeButtons

app/components/Panel/Panel.js

@@ -74,7 +74,7 @@ const Panel = ({ onSubmit, editWidget }) => {
 
   // TODO: Refactor into an array filter / find
   const needsConfig = getWidgetType(widget) !== 'VOTES' && getWidgetType(widget) !== 'DOT_VOTES' && getWidgetType(widget) !== 'NONE'
-  const submitDisabled = widget === undefined || (needsConfig && configData === undefined)
+  const submitDisabled = widget === -1 || (needsConfig && configData === undefined)
 
   //  TODO: handle when selecting another widget once configData is set (we should reset on widget change)
 

app/components/Widget/Votes/Votes.js

@@ -39,11 +39,9 @@ const Votes = () => {
         <Status vote={vote} />
       </div>
       <div css={`
-        display: flex;
         margin-bottom: ${GU}px;
       `}>
-        <Id id={vote.id} />
-        <Description text={vote.description} />
+        <Description id={vote.id} text={vote.description} />
       </div>
       <div css={`
         display: flex;
@@ -140,7 +138,7 @@ Status.propTypes = {
 
 const Id = ({ id }) => (
   <IdContainer>
-    #{id}
+    #{id}:
   </IdContainer>
 )
 
@@ -149,13 +147,14 @@ Id.propTypes = {
 }
 
 const IdContainer = styled.span`
-  ${textStyle('body2')};
+  ${textStyle('body1')};
   font-weight: bold;
+  margin-right: ${GU}px;
 `
 
 const ADDRESS_REGEX = /0x[a-fA-F0-9]{40}/g
 
-const Description = ({ text }) => {
+const Description = ({ id, text }) => {
   const startIndex = text.search(ADDRESS_REGEX)
   const endIndex = startIndex + 42
   const beforeAddress = text.substring(0, startIndex)
@@ -168,7 +167,7 @@ const Description = ({ text }) => {
   // TODO: separate address entity styling from text!
   return (
     <div css={`
-        ${textStyle('body2')};
+        ${textStyle('body1')};
         overflow: hidden;
         line-height: ${3 * GU}px; /* 24px line-height of textStyle('body2') */
         height: ${3* GU * 3}px; /* line-height * 3 lines */
@@ -177,6 +176,7 @@ const Description = ({ text }) => {
         -webkit-line-clamp: 3;
         margin: 0 ${.5 * GU}px;
       `}>
+      <Id id={id} />
       {
         startIndex < 1
           ? text
@@ -200,6 +200,7 @@ const Description = ({ text }) => {
 }
 
 Description.propTypes = {
+  id: PropTypes.string.isRequired,
   text: PropTypes.string.isRequired,
 }
 
@@ -220,7 +221,7 @@ const Result = ({ yea, nay }) => {
   }
   return (
     <ResultContainer>
-      <LabelContainer>
+      <LabelContainer css='margin-bottom: 2px;'>
         <LabelText>
           YES {percentageYea}%
         </LabelText>

app/store/utils/ipfs.js

@@ -17,7 +17,15 @@ export const ipfsGet = async cId => {
   }
   try {
     const { data } = await axios.get(endpoint)
-    return data
+    if (typeof data === 'object') return data
+    // If we retrieve a regular IPFS file from the '/object/data' endpoint,
+    // it will contain the array but with some garbage data surrounding it.
+    // So we can extract the relavant string and parse it into JSON
+    const extractedString = data.substring(
+      data.indexOf('['),
+      data.lastIndexOf(']') + 1
+    )
+    return JSON.parse(extractedString)
   } catch (err) {
     console.error('Error getting data from IPFS', err)
   }

manifest.json

@@ -1,6 +1,6 @@
 {
   "name": "About",
-  "description": "A customizable interface to add interactive widgets with information and insights about your organization.",
+  "description": "A customizable interface to add widgets for your organization's details and insights",
   "author": "Autark",
   "changelog_url": "https://github.com/AutarkLabs/about/releases",
   "source_url": "https://github.com/AutarkLabs/about/tree/master/",