From c9dbdb42a6372cf907e60628810929ff362514cb Mon Sep 17 00:00:00 2001
From: Felipe Carlos <efelipecarlos@gmail.com>
Date: Wed, 17 Apr 2024 12:13:48 -0300
Subject: [PATCH] contrib: updating component style

---
 .../feedback/components/FeedbackSpace.js      | 342 +++++++++++-------
 .../feedback/components/feedback/Feedback.js  |  37 +-
 .../components/modal/FeedbackModal.js         |   6 +-
 3 files changed, 255 insertions(+), 130 deletions(-)

diff --git a/src/lib/contrib/feedback/components/FeedbackSpace.js b/src/lib/contrib/feedback/components/FeedbackSpace.js
index 7d8c406..cdae235 100644
--- a/src/lib/contrib/feedback/components/FeedbackSpace.js
+++ b/src/lib/contrib/feedback/components/FeedbackSpace.js
@@ -23,6 +23,8 @@ import {
   Popup,
   Icon,
   Container,
+  List,
+  Header,
 } from 'semantic-ui-react';
 
 import { i18next } from '@translations/i18next';
@@ -161,141 +163,237 @@ export class FeedbackSpaceComponent extends Component {
           <Container>
             <Segment basic>
               <Container>
-                <Grid fluid verticalAlign={'middle'}>
+                <Grid stackable>
                   <Grid.Row>
-                    <Grid.Column width={12}>
+                    <Grid.Column computer={12} mobile={16} tablet={16}>
                       <p className={'feedback feedback-metrics-title'}>
                         Community feedback for <b>{recordTitle}</b>
                       </p>
                     </Grid.Column>
 
-                    <Grid.Column width={4} align={'right'}>
-                      <Grid>
-                        <Grid.Row>
-                          <Grid.Column width={16} textAlign={'center'}>
-                            <Loader
-                              isLoading={
-                                metricsData === undefined && metricsIsLoading
-                              }
-                            >
-                              {recordMetricDataOverview ? (
-                                <Statistic size={'small'}>
-                                  <Statistic.Value>
-                                    {recordMetricDataOverview}/5
-                                  </Statistic.Value>
-                                  <Statistic.Label>
-                                    <Popup
-                                      trigger={
-                                        <p>
-                                          General Rating{' '}
-                                          <Icon name={'dropdown'} />
-                                        </p>
-                                      }
-                                      flowing
-                                      hoverable
-                                    >
-                                      <Grid
-                                        centered
-                                        divided
-                                        columns={
-                                          topicMetricsDataOverview.length
-                                        }
-                                      >
-                                        {topicMetricsDataOverview.map(
-                                          (topicMetric) => (
-                                            <Grid.Column textAlign="center">
-                                              <Statistic size={'tiny'}>
-                                                <Statistic.Label>
-                                                  {topicMetric.name}
-                                                </Statistic.Label>
-                                                <Statistic.Value>
-                                                  {topicMetric.rating}/5
-                                                </Statistic.Value>
-                                              </Statistic>
-                                            </Grid.Column>
-                                          )
-                                        )}
-                                      </Grid>
-                                    </Popup>
-                                  </Statistic.Label>
-                                </Statistic>
-                              ) : (
+                    <Grid.Column
+                      width={4}
+                      textAlign={'right'}
+                      only={'computer'}
+                    >
+                      <Loader
+                        isLoading={
+                          metricsData === undefined && metricsIsLoading
+                        }
+                      >
+                        {recordMetricDataOverview ? (
+                          <Statistic size={'small'}>
+                            <Statistic.Value>
+                              {recordMetricDataOverview}/5
+                            </Statistic.Value>
+                            <Statistic.Label>
+                              <Popup
+                                trigger={
+                                  <p>
+                                    General Rating <Icon name={'dropdown'} />
+                                  </p>
+                                }
+                                flowing
+                                hoverable
+                              >
                                 <Grid
-                                  fluid
-                                  className={'feedback feedback-metrics-empty'}
+                                  centered
+                                  divided
+                                  columns={topicMetricsDataOverview.length}
                                 >
-                                  <Grid.Row>
-                                    <Grid.Column
-                                      width={16}
-                                      textAlign={'center'}
-                                    >
-                                      {i18next.t(
-                                        'There is not feedback metrics available yet.'
-                                      )}
-                                    </Grid.Column>
-                                  </Grid.Row>
+                                  {topicMetricsDataOverview.map(
+                                    (topicMetric) => (
+                                      <Grid.Column textAlign="center">
+                                        <Statistic size={'tiny'}>
+                                          <Statistic.Label>
+                                            {topicMetric.name}
+                                          </Statistic.Label>
+                                          <Statistic.Value>
+                                            {topicMetric.rating}/5
+                                          </Statistic.Value>
+                                        </Statistic>
+                                      </Grid.Column>
+                                    )
+                                  )}
                                 </Grid>
-                              )}
-                            </Loader>
-                          </Grid.Column>
-                        </Grid.Row>
-                      </Grid>
+                              </Popup>
+                            </Statistic.Label>
+                          </Statistic>
+                        ) : (
+                          <Grid
+                            fluid
+                            padded
+                            className={'feedback feedback-metrics-empty'}
+                          >
+                            <Grid.Row>
+                              <Grid.Column width={16} textAlign={'center'}>
+                                {i18next.t(
+                                  'There is not feedback metrics available yet.'
+                                )}
+                              </Grid.Column>
+                            </Grid.Row>
+                          </Grid>
+                        )}
+                      </Loader>
+                    </Grid.Column>
+
+                    <Grid.Column
+                      width={16}
+                      textAlign={'left'}
+                      only={'mobile tablet'}
+                      style={{ padding: '20px' }}
+                    >
+                      <Loader
+                        isLoading={
+                          metricsData === undefined && metricsIsLoading
+                        }
+                      >
+                        {recordMetricDataOverview ? (
+                          <Grid>
+                            <Grid.Row>
+                              <Grid.Column width={16}>
+                                <Header as={'h3'}>General Rating</Header>
+                              </Grid.Column>
+                            </Grid.Row>
+                            <Grid.Row>
+                              <Grid.Column width={16}>
+                                <List
+                                  selection
+                                  verticalAlign={'middle'}
+                                  size={'big'}
+                                >
+                                  {topicMetricsDataOverview.map(
+                                    (topic, index) => {
+                                      const topicValue = Math.round(
+                                        topic.rating
+                                      );
+                                      return (
+                                        <List.Item>
+                                          <List.Content floated={'right'}>
+                                            <List.Header>
+                                              <p>{topicValue}/5</p>
+                                            </List.Header>
+                                          </List.Content>
+                                          <List.Content
+                                            style={{
+                                              textTransform: 'capitalize',
+                                            }}
+                                          >
+                                            <List.Header>
+                                              <p>{topic.name}</p>
+                                            </List.Header>
+                                          </List.Content>
+                                        </List.Item>
+                                      );
+                                    }
+                                  )}
+                                </List>
+                              </Grid.Column>
+                            </Grid.Row>
+                          </Grid>
+                        ) : (
+                          <Grid
+                            fluid
+                            padded
+                            className={'feedback feedback-metrics-empty'}
+                          >
+                            <Grid.Row>
+                              <Grid.Column width={16} textAlign={'center'}>
+                                {i18next.t(
+                                  'There is not feedback metrics available yet.'
+                                )}
+                              </Grid.Column>
+                            </Grid.Row>
+                          </Grid>
+                        )}
+                      </Loader>
+                    </Grid.Column>
+                  </Grid.Row>
+                  <Grid.Row only={'computer'}>
+                    <Grid.Column textAlign={'right'}>
+                      <Loader
+                        isLoading={
+                          userStateData === undefined && userStateDataIsLoading
+                        }
+                      >
+                        <Button
+                          content={i18next.t('Share your feedback')}
+                          size={'tiny'}
+                          color={'green'}
+                          onClick={() => {
+                            if (user.userIsAuthenticated) {
+                              if (!userStateData.is_valid_to_create) {
+                                this.showModalMessage(
+                                  i18next.t('Feedback validation'),
+                                  i18next.t(
+                                    'You already have feedback. Please, you can edit your already defined ' +
+                                      'feedback providing more details, or' +
+                                      ' delete it to create a new one.'
+                                  )
+                                );
+                              } else {
+                                feedbackCreateModal();
+                              }
+                            } else {
+                              this.showModalMessage(
+                                i18next.t('Login required'),
+                                <Trans>
+                                  To create a new feedback in this record, you
+                                  should be logged in.{' '}
+                                  <a href={'/signup'}>Click here</a> to register
+                                  now or <a href={'/login'}>Login</a>
+                                </Trans>
+                              );
+                            }
+                          }}
+                        />
+                      </Loader>
+                    </Grid.Column>
+                  </Grid.Row>
+                  <Grid.Row only={'tablet mobile'}>
+                    <Grid.Column>
+                      <Loader
+                        isLoading={
+                          userStateData === undefined && userStateDataIsLoading
+                        }
+                      >
+                        <Button
+                          content={i18next.t('Share your feedback')}
+                          fluid
+                          size={'tiny'}
+                          color={'green'}
+                          onClick={() => {
+                            if (user.userIsAuthenticated) {
+                              if (!userStateData.is_valid_to_create) {
+                                this.showModalMessage(
+                                  i18next.t('Feedback validation'),
+                                  i18next.t(
+                                    'You already have feedback. Please, you can edit your already defined ' +
+                                      'feedback providing more details, or' +
+                                      ' delete it to create a new one.'
+                                  )
+                                );
+                              } else {
+                                feedbackCreateModal();
+                              }
+                            } else {
+                              this.showModalMessage(
+                                i18next.t('Login required'),
+                                <Trans>
+                                  To create a new feedback in this record, you
+                                  should be logged in.{' '}
+                                  <a href={'/signup'}>Click here</a> to register
+                                  now or <a href={'/login'}>Login</a>
+                                </Trans>
+                              );
+                            }
+                          }}
+                        />
+                      </Loader>
                     </Grid.Column>
                   </Grid.Row>
                 </Grid>
               </Container>
-              <Grid>
-                <Grid.Row>
-                  <Grid.Column width={12}></Grid.Column>
-                  <Grid.Column width={4}>
-                    <Grid fluid>
-                      <Grid.Row>
-                        <Grid.Column width={16} textAlign={'center'}>
-                          <Loader
-                            isLoading={
-                              userStateData === undefined &&
-                              userStateDataIsLoading
-                            }
-                          >
-                            <Button
-                              content={i18next.t('Share your feedback')}
-                              size={'tiny'}
-                              color={'green'}
-                              onClick={() => {
-                                if (user.userIsAuthenticated) {
-                                  if (!userStateData.is_valid_to_create) {
-                                    this.showModalMessage(
-                                      i18next.t('Feedback validation'),
-                                      i18next.t(
-                                        'You already have feedback. Please, you can edit your already defined ' +
-                                          'feedback providing more details, or' +
-                                          ' delete it to create a new one.'
-                                      )
-                                    );
-                                  } else {
-                                    feedbackCreateModal();
-                                  }
-                                } else {
-                                  this.showModalMessage(
-                                    i18next.t('Login required'),
-                                    <Trans>
-                                      To create a new feedback in this record,
-                                      you should be logged in.{' '}
-                                      <a href={'/signup'}>Click here</a> to
-                                      register now or{' '}
-                                      <a href={'/login'}>Login</a>
-                                    </Trans>
-                                  );
-                                }
-                              }}
-                            />
-                          </Loader>
-                        </Grid.Column>
-                      </Grid.Row>
-                    </Grid>
-                  </Grid.Column>
-                </Grid.Row>
-              </Grid>
             </Segment>
             <Segment basic>
               <TimelineFeed />
diff --git a/src/lib/contrib/feedback/components/feedback/Feedback.js b/src/lib/contrib/feedback/components/feedback/Feedback.js
index eaddacc..1b6d3c9 100644
--- a/src/lib/contrib/feedback/components/feedback/Feedback.js
+++ b/src/lib/contrib/feedback/components/feedback/Feedback.js
@@ -9,7 +9,7 @@
 import React, { Component } from 'react';
 
 import { Image } from 'react-invenio-forms';
-import { Container, Dropdown, Feed, Grid, Statistic } from 'semantic-ui-react';
+import { Dropdown, Feed, Grid, List, Statistic } from 'semantic-ui-react';
 
 import { i18next } from '@translations/i18next';
 
@@ -70,18 +70,19 @@ export class Feedback extends Component {
 
               <Feed.Extra>
                 {error && <Error error={error} />}
-                <Grid>
+                <Grid stackable>
                   <Grid.Row verticalAlign={'middle'}>
-                    <Grid.Column width={8}>
+                    <Grid.Column computer={10} mobile={16} tablet={16}>
                       <MessageContent content={comment?.content} />
                     </Grid.Column>
-                    <Grid.Column width={8}>
+
+                    <Grid.Column computer={6} only={'computer'}>
                       <Grid centered columns={topics.length}>
                         {topics.map((topic, index) => {
                           const topicValue = Math.round(topic.rating);
                           return (
                             <Grid.Column textAlign="center">
-                              <Statistic size={'mini'}>
+                              <Statistic size={'tiny'}>
                                 <Statistic.Label>{topic.name}</Statistic.Label>
                                 <Statistic.Value>
                                   {topicValue}/5
@@ -92,6 +93,32 @@ export class Feedback extends Component {
                         })}
                       </Grid>
                     </Grid.Column>
+
+                    <Grid.Column width={16} only={'tablet mobile'}>
+                      <List selection verticalAlign={'middle'} size={'large'}>
+                        {topics.map((topic, index) => {
+                          const topicValue = Math.round(topic.rating);
+                          return (
+                            <List.Item>
+                              <List.Content floated={'right'}>
+                                <List.Header>
+                                  <p>{topicValue}/5</p>
+                                </List.Header>
+                              </List.Content>
+                              <List.Content
+                                style={{
+                                  textTransform: 'capitalize',
+                                }}
+                              >
+                                <List.Header>
+                                  <p>{topic.name}</p>
+                                </List.Header>
+                              </List.Content>
+                            </List.Item>
+                          );
+                        })}
+                      </List>
+                    </Grid.Column>
                   </Grid.Row>
                 </Grid>
               </Feed.Extra>
diff --git a/src/lib/contrib/feedback/components/modal/FeedbackModal.js b/src/lib/contrib/feedback/components/modal/FeedbackModal.js
index 008e9d3..acacd78 100644
--- a/src/lib/contrib/feedback/components/modal/FeedbackModal.js
+++ b/src/lib/contrib/feedback/components/modal/FeedbackModal.js
@@ -96,8 +96,8 @@ export class FeedbackModalComponent extends Component {
           >
             {({ values, touched, errors, handleSubmit, isSubmitting }) => (
               <form onSubmit={handleSubmit}>
-                <Grid columns={2} divided padded>
-                  <Grid.Column width={5}>
+                <Grid columns={2} divided padded stackable>
+                  <Grid.Column computer={5} tablet={16} mobile={16}>
                     <Container style={{ marginBottom: '2rem' }}>
                       <Label circular color={'blue'} key={'blue'}>
                         1
@@ -117,7 +117,7 @@ export class FeedbackModalComponent extends Component {
                       </Grid>
                     )}
                   </Grid.Column>
-                  <Grid.Column centered width={11}>
+                  <Grid.Column centered computer={11} tablet={16} mobile={16}>
                     <Container style={{ marginBottom: '2rem' }}>
                       <Label circular color={'blue'} key={'blue'}>
                         2