Replace styled-components with bulma helpers (#1783)

Use Bulma helpers whenever possible instead of custom styled components.
This pull request replaces primarily color definitions, spacing and flex instructions.

scm-ui/ui-components/src/layout/FooterSection.tsx

@@ -22,25 +22,21 @@
  * SOFTWARE.
  */
 import React, { FC, ReactNode } from "react";
+import classNames from "classnames";
 import styled from "styled-components";
 
 type Props = {
   title: ReactNode;
 };
 
-const Title = styled.div`
-  font-weight: bold;
-  margin-bottom: 0.5rem;
-`;
-
 const Menu = styled.ul`
   padding-left: 1.1rem;
 `;
 
 const FooterSection: FC<Props> = ({ title, children }) => {
   return (
-    <section className="column is-one-third">
-      <Title>{title}</Title>
+    <section className={classNames("column", "is-one-third")}>
+      <div className={classNames("has-text-weight-bold", "mb-2")}>{title}</div>
       <Menu>{children}</Menu>
     </section>
   );

scm-ui/ui-components/src/layout/GroupEntries.tsx

@@ -21,25 +21,12 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import React, { FC, ReactNode } from "react";
+import classNames from "classnames";
 import styled from "styled-components";
 
-const TitleWrapper = styled.div`
-  display: flex;
-  align-items: center;
-  padding: 0.75rem;
-  font-size: 1rem;
-  font-weight: bold;
-`;
-
 const Separator = styled.div`
   border-bottom: 1px solid rgb(219, 219, 219, 0.5);
-  margin: 0 1rem;
-`;
-
-const Box = styled.div`
-  padding: 0.5rem;
 `;
 
 type Props = {
@@ -51,14 +38,16 @@ const GroupEntries: FC<Props> = ({ namespaceHeader, elements }) => {
   const content = elements.map((entry, index) => (
     <React.Fragment key={index}>
       <div>{entry}</div>
-      {index + 1 !== elements.length ? <Separator /> : null}
+      {index + 1 !== elements.length ? <Separator className="mx-4" /> : null}
     </React.Fragment>
   ));
 
   return (
     <>
-      <TitleWrapper>{namespaceHeader}</TitleWrapper>
-      <Box className="box">{content}</Box>
+      <div className={classNames("is-flex", "is-align-items-center", "is-size-6", "has-text-weight-bold", "p-3")}>
+        {namespaceHeader}
+      </div>
+      <div className={classNames("box", "p-2")}>{content}</div>
       <div className="is-clearfix" />
     </>
   );

scm-ui/ui-components/src/layout/GroupEntry.stories.tsx

@@ -22,7 +22,6 @@
  * SOFTWARE.
  */
 
-import styled from "styled-components";
 import Icon from "../Icon";
 import { storiesOf } from "@storybook/react";
 import { MemoryRouter } from "react-router-dom";
@@ -31,16 +30,12 @@ import GroupEntry from "./GroupEntry";
 import { Button, ButtonGroup } from "../buttons";
 import copyToClipboard from "../CopyToClipboard";
 
-const Wrapper = styled.div`
-  margin: 2rem;
-`;
-
 const link = "/foo/bar";
 const icon = <Icon name="icons fa-2x fa-fw" />;
-const name = <strong className="is-marginless">main content</strong>;
+const name = <strong className="m-0">main content</strong>;
 const description = <small>more text</small>;
 const longName = (
-  <strong className="is-marginless">
+  <strong className="m-0">
     Very-important-repository-with-a-particular-long-but-easily-rememberable-name-which-also-is-written-in-kebab-case
   </strong>
 );
@@ -56,7 +51,7 @@ const contentRight = (
 
 storiesOf("GroupEntry", module)
   .addDecorator((story) => <MemoryRouter initialEntries={["/"]}>{story()}</MemoryRouter>)
-  .addDecorator((storyFn) => <Wrapper>{storyFn()}</Wrapper>)
+  .addDecorator((storyFn) => <div className="m-5">{storyFn()}</div>)
   .add("Default", () => (
     <GroupEntry link={link} avatar={icon} name={name} description={description} contentRight={contentRight} />
   ))

scm-ui/ui-components/src/layout/GroupEntry.tsx

@@ -21,18 +21,14 @@
  * OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
  * SOFTWARE.
  */
-
 import React, { FC, ReactNode } from "react";
 import { Link } from "react-router-dom";
+import classNames from "classnames";
 import styled from "styled-components";
 
 const StyledGroupEntry = styled.div`
   max-height: calc(90px - 1.5rem);
   width: 100%;
-  display: flex;
-  justify-content: space-between;
-  padding: 0.5rem;
-  align-items: center;
   pointer-events: all;
 `;
 
@@ -49,7 +45,6 @@ const OverlayLink = styled(Link)`
 `;
 
 const Avatar = styled.div`
-  padding-right: 1rem;
   .predefined-avatar {
     height: 48px;
     width: 48px;
@@ -57,12 +52,7 @@ const Avatar = styled.div`
   }
 `;
 
-const Name = styled.div`
-  padding: 0 0.25rem;
-`;
-
 const Description = styled.p`
-  padding: 0 0.25rem;
   height: 1.5rem;
   text-overflow: ellipsis;
   overflow-x: hidden;
@@ -72,30 +62,14 @@ const Description = styled.p`
 `;
 
 const ContentLeft = styled.div`
-  display: flex;
-  flex: 1 1 auto;
-  align-items: center;
   min-width: 0;
 `;
 
 const ContentRight = styled.div`
-  display: flex;
-  flex: 0 0 auto;
-  justify-content: flex-end;
   pointer-events: all;
-  padding-left: 2rem;
   margin-bottom: -10px;
 `;
 
-const NameDescriptionWrapper = styled.div`
-  overflow: hidden;
-  flex: 1 1 auto;
-`;
-
-const Wrapper = styled.div`
-  position: relative;
-`;
-
 type Props = {
   title?: string;
   avatar: string | ReactNode;
@@ -107,19 +81,32 @@ type Props = {
 
 const GroupEntry: FC<Props> = ({ link, avatar, title, name, description, contentRight }) => {
   return (
-    <Wrapper>
+    <div className="is-relative">
       <OverlayLink to={link} />
-      <StyledGroupEntry title={title}>
-        <ContentLeft>
-          <Avatar>{avatar}</Avatar>
-          <NameDescriptionWrapper>
-            <Name>{name}</Name>
-            <Description>{description}</Description>
-          </NameDescriptionWrapper>
+      <StyledGroupEntry
+        className={classNames("is-flex", "is-justify-content-space-between", "is-align-items-center", "p-2")}
+        title={title}
+      >
+        <ContentLeft className={classNames("is-flex", "is-flex-grow-1", "is-align-items-center")}>
+          <Avatar className="mr-4">{avatar}</Avatar>
+          <div className={classNames("is-flex-grow-1", "is-clipped")}>
+            <div className="mx-1">{name}</div>
+            <Description className="mx-1">{description}</Description>
+          </div>
         </ContentLeft>
-        <ContentRight className="is-hidden-touch">{contentRight}</ContentRight>
+        <ContentRight
+          className={classNames(
+            "is-hidden-touch",
+            "is-flex",
+            "is-flex-shrink-0",
+            "is-justify-content-flex-end",
+            "pl-5"
+          )}
+        >
+          {contentRight}
+        </ContentRight>
       </StyledGroupEntry>
-    </Wrapper>
+    </div>
   );
 };
 

scm-ui/ui-components/src/layout/Page.tsx

@@ -45,22 +45,14 @@ type Props = {
 };
 
 const PageActionContainer = styled.div`
-  justify-content: flex-end;
-  align-items: center;
-
   // every child except first
   > * ~ * {
     margin-left: 1.25rem;
   }
 `;
 
-const MarginLeft = styled.div`
-  margin-left: 0.5rem;
-`;
-
-const FlexContainer = styled.div`
-  display: flex;
-  flex-direction: row;
+const MaxTitleHeight = styled.div`
+  // remove blank space in repo create form
   height: 2.25rem;
 `;
 
@@ -98,12 +90,19 @@ export default class Page extends React.Component<Props> {
 
     let pageActions = null;
     let pageActionsExists = false;
-    React.Children.forEach(children, child => {
+    React.Children.forEach(children, (child) => {
       if (child && !error) {
         if (this.isPageAction(child)) {
           pageActions = (
             <PageActionContainer
-              className={classNames("column", "is-three-fifths", "is-mobile-action-spacing", "is-flex-tablet")}
+              className={classNames(
+                "column",
+                "is-three-fifths",
+                "is-mobile-action-spacing",
+                "is-flex-tablet",
+                "is-justify-content-flex-end",
+                "is-align-items-center"
+              )}
             >
               {child}
             </PageActionContainer>
@@ -119,10 +118,10 @@ export default class Page extends React.Component<Props> {
         <>
           <div className="columns">
             <div className="column">
-              <FlexContainer>
+              <MaxTitleHeight className="is-flex">
                 <Title title={this.getTextualTitle()}>{this.getTitleComponent()}</Title>
-                {afterTitle && <MarginLeft>{afterTitle}</MarginLeft>}
-              </FlexContainer>
+                {afterTitle && <div className="ml-2">{afterTitle}</div>}
+              </MaxTitleHeight>
               {subtitle ? <Subtitle>{subtitle}</Subtitle> : null}
             </div>
             {pageActions}
@@ -145,7 +144,7 @@ export default class Page extends React.Component<Props> {
     }
 
     const content: ReactNode[] = [];
-    React.Children.forEach(children, child => {
+    React.Children.forEach(children, (child) => {
       if (child) {
         if (!this.isPageAction(child)) {
           content.push(child);