chore: style updates

2024-12-23 15:19:01 +01:00 · 2022-01-08 00:56:10 +05:30 · 2022-01-08 00:56:10 +05:30 · 8da4e71d47
commit 8da4e71d47
parent f817aa3d9d
14 changed files with 23 additions and 15 deletions
--- a/packages/grafnode-components/src/components/Dropdown/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/Dropdown/StyledWrapper.js
@ -12,7 +12,7 @@ const Wrapper = styled.div`
    background-color: white;
    font-size: 0.8125rem;
    color: rgb(48 48 48);
-    background: #f9f9f9;
+    background: #fff;
    box-shadow: rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px;

    .tippy-content {
--- a/packages/grafnode-components/src/components/Navbar/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/Navbar/StyledWrapper.js
@ -1,7 +1,6 @@
 import styled from 'styled-components';

 const StyledWrapper = styled.div`
-  background-color: #f2f2f2;
 `;

 export default StyledWrapper;
--- a/packages/grafnode-components/src/components/QueryEditor/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/QueryEditor/StyledWrapper.js
@ -3,6 +3,7 @@ import styled from 'styled-components';
 const StyledWrapper = styled.div`
  div.CodeMirror {
    border: solid 1px #e1e1e1;
+    height: 96%;
  }

  textarea.cm-editor {
--- a/packages/grafnode-components/src/components/QueryEditor/index.js
+++ b/packages/grafnode-components/src/components/QueryEditor/index.js
@ -169,7 +169,7 @@ export default class QueryEditor extends React.Component {
  render() {
    return (
      <StyledWrapper
-        className="mt-4"
+        className="mt-4 h-full"
        aria-label="Query Editor"
        ref={node => {
          this._node = node;
--- a/packages/grafnode-components/src/components/RequestPane/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/RequestPane/StyledWrapper.js
@ -50,6 +50,10 @@ const StyledWrapper = styled.div`
      box-shadow: none !important;
    }
  }
+
+  .react-tabs__tab-panel--selected {
+    height: 90%;
+  }
 `;

 export default StyledWrapper;
--- a/packages/grafnode-components/src/components/RequestPane/index.js
+++ b/packages/grafnode-components/src/components/RequestPane/index.js
@ -6,8 +6,8 @@ import RequestHeaders from '../RequestHeaders';

 const RequestPane = ({onRunQuery, schema, leftPaneWidth, value, onQueryChange}) => {
  return (
-    <StyledWrapper className="">
-      <Tabs className='react-tabs mt-1 flex flex-grow flex-col' forceRenderTabPanel>
+    <StyledWrapper className="h-full">
+      <Tabs className='react-tabs mt-1 flex flex-grow flex-col h-full' forceRenderTabPanel>
        <TabList>
          <Tab tabIndex="-1">Query</Tab>
          <Tab tabIndex="-1">Headers</Tab>
--- a/packages/grafnode-components/src/components/RequestTabPanel/index.js
+++ b/packages/grafnode-components/src/components/RequestTabPanel/index.js
@ -113,7 +113,7 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
  };

  return (
-    <StyledWrapper>
+    <StyledWrapper className="flex flex-col flex-grow">
      <div
        className="pb-4 px-4"
        style={{
@ -128,9 +128,9 @@ const RequestTabPanel = ({dispatch, actions, collections, activeRequestTabId, re
          collections={collections}
        />
      </div>
-      <section className="main">
+      <section className="main flex flex-grow">
        <section className="request-pane px-4">
-          <div style={{width: `${leftPaneWidth}px`}}>
+          <div style={{width: `${leftPaneWidth}px`, height: 'calc(100% - 5px)'}}>
            <RequestPane
              onRunQuery={runQuery}
              schema={schema}
--- a/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/RequestTabs/StyledWrapper.js
@ -21,6 +21,7 @@ const Wrapper = styled.div`
      padding-left: 0;
      padding-right: 0;
      cursor: pointer;
+      font-size: 0.8125rem;

      .tab-container {
        border-left: 1px solid #dcdcdc;
--- a/packages/grafnode-components/src/components/RequestTabs/index.js
+++ b/packages/grafnode-components/src/components/RequestTabs/index.js
@ -50,7 +50,7 @@ const RequestTabs = ({actions, dispatch, activeRequestTabId, requestTabs}) => {
            return <li key={rt.id} className={getTabClassname(rt, index)} role="tab" onClick={() => handleClick(rt)}>
              <div className="flex items-center justify-between tab-container">
                <div className="flex items-center tab-label">
-                  <span className="tab-method" style={{fontSize: 13, color: getMethodColor(rt.method)}}>{rt.method}</span>
+                  <span className="tab-method" style={{color: getMethodColor(rt.method)}}>{rt.method}</span>
                  <span className="text-gray-700 ml-1 tab-name">{rt.name}</span>
                </div>
                {rt.id === activeRequestTabId ? (
--- a/packages/grafnode-components/src/components/ResponsePane/QueryResult/index.js
+++ b/packages/grafnode-components/src/components/ResponsePane/QueryResult/index.js
@ -37,7 +37,7 @@ const QueryResult = ({data, isLoading, width}) => {
  }, [editor.current, cmEditor, data]);

  return (
-    <StyledWrapper className="mt-4" style={{position: 'relative'}}>
+    <StyledWrapper className="mt-4 w-full" style={{position: 'relative', height: '90%'}}>
      {isLoading && (
        <div className="overlay">
          <div style={{marginBottom: 15, fontSize: 26}}>
@ -58,7 +58,6 @@ const QueryResult = ({data, isLoading, width}) => {
          id="operation"
          style={{
            width: `${width}px`,
-            height: '400px'
          }}
          ref={editor}
          className="cm-editor"
--- a/packages/grafnode-components/src/components/ResponsePane/index.js
+++ b/packages/grafnode-components/src/components/ResponsePane/index.js
@ -42,7 +42,7 @@ const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
  }

  return (
-    <StyledWrapper className="">
+    <StyledWrapper className="flex flex-col h-full">
      <div className="flex items-center tabs mt-1" role="tablist">
        <div className={getTabClassname('response')} role="tab" onClick={() => setSelectedTab('response')}>Response</div>
        <div className={getTabClassname('headers')} role="tab" onClick={() => setSelectedTab('headers')}>Headers</div>
@ -54,7 +54,7 @@ const ResponsePane = ({rightPaneWidth, response, isLoading}) => {
          </div>
        ) : null }
      </div>
-      <section>
+      <section className="flex flex-grow">
        {getTabPanel(selectedTab)}
      </section>
    </StyledWrapper>
--- a/packages/grafnode-components/src/components/Sidebar/Collections/Collection/StyledWrapper.js
+++ b/packages/grafnode-components/src/components/Sidebar/Collections/Collection/StyledWrapper.js
@ -7,7 +7,6 @@ const Wrapper = styled.div`
    user-select: none;
    padding-left: 8px;
    padding-right: 8px;
-    background-color: #f4f4f4;
    font-weight: 600;

    .rotate-90 {
--- a/packages/grafnode-run/src/globalStyles.js
+++ b/packages/grafnode-run/src/globalStyles.js
@ -1,6 +1,10 @@
 import { createGlobalStyle } from 'styled-components';

 const GlobalStyle = createGlobalStyle`
+  .CodeMirror-gutters {
+    background-color: #f6f8fa;
+  }
+
  @keyframes fade-in {
    from {
      opacity: 0;
--- a/packages/grafnode-run/src/pageComponents/Main/StyledWrapper.js
+++ b/packages/grafnode-run/src/pageComponents/Main/StyledWrapper.js
@ -4,11 +4,12 @@ const Wrapper = styled.div`
  display: flex;
  width: 100%;
  height: 100%;
-  min-height: calc(100vh - 38px);
+  min-height: 100vh;

  aside {
    min-width: 230px;
    border-right: solid 1px #e1e1e1;
+    background-color: #F6F8FA;
  }

  section.main {