_renderStyles()

in dialogflow-prebuilt-agents/client_side_messenger/retail_assistant/retail_assistant.js [345:444]

• 85 lines of code
• 2 McCabe index (conditional complexity)

    _renderStyles() {
      const styles = document.createElement('style');
      styles.textContent = `
              .wrapper {
                color: var(--df-messenger-default-text-color);
              }
  
              .title-link {
                text-decoration: none;
                color: var(--df-messenger-default-text-color);
              }
  
              .item-list {
                display: flex;
                width: 100%;
                gap: 15px;
                /* No flex wrap. */
                overflow-x: auto;
              }
  
              .item {
                width: 50%;
                background: #E8F0FE;
                border-radius: 15px;
                padding: 16px;
              }
  
              .review {
                background: #fff;
                border-radius: 15px;
                box-shadow: 0 4px 8px rgba(0,0,0,0.1);
                padding: 20px;
                // width: 30%; /* Adjust as necessary for your layout */
                // margin: 10px;
                box-sizing: border-box;
              }
  
              .review-header {
                display: flex;
                align-items: center;
                margin-bottom: 15px;
              }
  
              .user-avatar {
                background-color: #0077CC;
                color: #fff;
                font-weight: bold;
                width: 50px;
                height: 50px;
                border-radius: 50%;
                display: flex;
                align-items: center;
                justify-content: center;
                margin-right: 10px;
              }
  
              .user-info {
                flex-grow: 1;
              }
  
              .user-name {
                font-size: 1.1em;
                color: #333;
              }
  
              .user-rating {
                display: flex;
                align-items: center;
              }
  
              .stars {
                color: #FFD700;
                font-size: 1em;
              }
  
              .rating-score {
                font-size: 0.8em;
                color: #777;
                margin-left: 5px;
              }
  
              .review-text {
                font-size: 0.9em;
                color: #555;
              }
  
              .review-title {
              font-size: 0.9em;
              font-weight: bold;
                color: #555;
  
              }
  
              .review-text a {
                color: #0077CC;
                text-decoration: none;
              }
            `;
      return styles;
    }