adds button toggle, removes br tag, improves styling for the sidepanel

Author: abhinav-anshul

debug.log

@@ -9,3 +9,7 @@
 [0526/174216.771:ERROR:crash_report_database_win.cc(469)] failed to stat report
 [0527/122222.926:ERROR:crash_report_database_win.cc(469)] failed to stat report
 [0527/122222.929:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0527/213826.020:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0527/213826.031:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0528/151733.993:ERROR:crash_report_database_win.cc(469)] failed to stat report
+[0528/151734.019:ERROR:crash_report_database_win.cc(469)] failed to stat report

src/components/Dashboard/APIcall.js

@@ -1,14 +1,14 @@
 /* eslint-disable */
-import React, { useState } from 'react'
+import React, { useState, useEffect } from 'react'
 import GitHubLogin from 'react-github-login'
 import { Button } from '@aragon/ui'
 import './test.css'
-import { Octokit } from '@octokit/rest'
 
 function APIcall() {
   const [boolButtonText, setBoolButtonText] = useState('CONNECT')
-
-  const [boolSwitch, setboolSwitch] = useState(false)
+  const [boolButtonText_disconnect, setBoolButtonText_disconnect] = useState(
+    'DISCONNECT'
+  )
 
   const onSuccess = function(details) {
     const code = details.code
@@ -17,28 +17,58 @@ function APIcall() {
       .then((response) => response.json())
       .then(({ token }) => localStorage.setItem('ACCESS TOKEN', token))
 
-    if (boolButtonText === 'CONNECT') {
-      setBoolButtonText('DISCONNECT')
-    } else {
-      setBoolButtonText('CONNECT')
-    }
+    // if (boolButtonText === 'CONNECT') {
+    //   setBoolButtonText('DISCONNECT')
+    // } else {
+    //   setBoolButtonText('CONNECT')
+    // }
+    setBoolButtonText('DISCONNECT')
+  }
+
+  const onSuccess_disconnect = function() {
+    localStorage.removeItem('ACCESS TOKEN')
+    setBoolButtonText_disconnect('CONNECT')
+  }
 
-    setboolSwitch(true)
+  const onFailure_disconnect = function() {
+    return null
   }
 
   const onFailure = (response) => console.error(response)
 
   return (
     <div style={{ display: 'flex', justifyContent: 'flex-end' }}>
       <Button mode='normal'>
-        <GitHubLogin
+        {localStorage.getItem('ACCESS TOKEN') ? (
+          <GitHubLogin
+            clientId='69bc88033c4b1bc2b4dc'
+            redirectUri='http://localhost:3000/'
+            onSuccess={onSuccess_disconnect}
+            onFailure={onFailure_disconnect}
+            buttonText={boolButtonText_disconnect}
+            // buttonText='DISCONNECT'
+            className='testcss'
+          />
+        ) : (
+          <GitHubLogin
+            clientId='69bc88033c4b1bc2b4dc'
+            redirectUri='http://localhost:3000/'
+            onSuccess={onSuccess}
+            onFailure={onFailure}
+            buttonText={boolButtonText}
+            //buttonText='CONNECT'
+            className='testcss'
+          />
+        )}
+
+        {/* <GitHubLogin
           clientId='69bc88033c4b1bc2b4dc'
           redirectUri='http://localhost:3000/'
           onSuccess={onSuccess}
           onFailure={onFailure}
           buttonText={boolButtonText}
           className='testcss'
-        />
+        /> */}
       </Button>
     </div>
   )

src/components/Disputes/Import.js

@@ -74,32 +74,20 @@ function Import() {
       ) : null}
 
       <SidePanel onClose={handleClose} title='Repository' opened={opened}>
-        <br />
-        <br />
-        <br />
-
         <DropDown
           selected={selected}
           onChange={handleOnChange}
           items={[...list]}
+          style={{ marginTop: '4rem' }}
         />
-        <br />
-
-        <div
-          css={`
-            padding: ${1 * GU}px;
-          `}
-        >
-          <TextInput placeholder='Provide a Name' />
-        </div>
-
-        <br />
-        <TextInput placeholder='Budget' />
-        <br />
-        <br />
-        <br />
-        <br />
-        <Button mode='positive'>Import Project</Button>
+
+        <TextInput style={{ marginTop: '2rem' }} placeholder='Provide a Name' />
+
+        <TextInput style={{ marginTop: '2rem' }} placeholder='Budget' />
+
+        <Button style={{ marginTop: '4rem' }} mode='positive'>
+          Import Project
+        </Button>
       </SidePanel>
     </>
   )